Загрузка PDF с сервера [duplicate]

Основываясь на ответе @Rick, который был действительно полезен.

Вы должны просмотреть строку data, если хотите поделиться ею следующим образом:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`Извините Я не могу комментировать ответ @ Rick из-за моей нынешней низкой репутации в StackOverflow.

было предложено .

Я с удовольствием использую FileSaver.js . Совместимость неплохая (IE10 + и все остальное), и это очень просто:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

Это решение извлекается непосредственно из репозитория github tiddlywiki (tiddlywiki.com). Я использовал tiddlywiki почти во всех браузерах, и он работает как шарм:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Github repo: Загрузите модуль хранителя

Следующий метод работает в IE11 +, Firefox 25+ и Chrome 30 +:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

См. это в действии: http://jsfiddle.net/Kg7eA/

URI браузера Firefox и Chrome для навигации, который позволяет нам создавать файлы, перейдя на URI данных, в то время как IE не поддерживает его в целях безопасности.

С другой стороны, IE имеет API для сохранения blob, который может использоваться для создания и загрузки файлов.

Решение, которое работает на IE10: (мне нужен файл csv, но этого достаточно, чтобы изменить тип и имя файла на txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

Как уже упоминалось ранее, filesaver - отличный пакет для работы с файлами на стороне клиента. Но с большими файлами это не очень хорошо. StreamSaver.js является альтернативным решением (которое указано в FileServer.js), которое может обрабатывать большие файлы:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

Если файл содержит текстовые данные, метод, который я использую, заключается в том, чтобы поместить текст в элемент textarea и выбрать его пользователем (щелкните в textarea, затем ctrl-A), затем скопируйте, а затем вставьте в текстовый редактор.

Все вышеприведенные примеры отлично работают в chrome и IE, но не работают в Firefox. Пожалуйста, обратите внимание на добавление привязки к телу и удаление его после нажатия.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Простое решение для готовых браузеров HTML5 ...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Использование

download('test.txt', 'Hello world!');

На самом деле это возможно - используйте Flash.

Вы можете либо сгенерировать контент с помощью JS, а затем инициализировать некоторые флеш-вары или просто сделать все в флеш-ролике.

Пожалуйста, возьмите посмотрите на этот для некоторых важных замечаний.

Вы даже можете сделать это лучше, чем просто URI. Используя Chrome, вы также можете предложить имя, которое будет принимать файл, как описано в в этом сообщении в блоге об именовании загрузки при использовании URI .

По состоянию на апрель 2014 года API-интерфейсы FileSytem не могут быть стандартизованы в W3C.

Погоны HTML5 голова вверх

Список рассылки W3C по API FileSytem

Если вы просто хотите преобразовать строку, которая будет доступна для загрузки, вы можете попробовать это с помощью jQuery.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

Все вышеупомянутые решения не работали во всех браузерах. Вот что, наконец, работает на IE 10+, Firefox и Chrome (и без jQuery или любой другой библиотеки):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Обратите внимание, что в зависимости от вашей ситуации вы также можете вызвать URL.revokeObjectURL после удаления elem. Согласно документам для URL.createObjectURL :

Каждый раз, когда вы вызываете createObjectURL (), создается новый URL-адрес объекта, даже если вы уже создали его для тот же объект. Каждый из них должен быть освобожден, вызывая URL.revokeObjectURL (), когда они вам больше не нужны. Браузеры автоматически освободят их, когда документ будет выгружен; однако, для оптимальной производительности и использования памяти, если есть безопасные моменты, когда вы можете явно их выгружать, вы должны это сделать.

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();