Как создать динамический файл + ссылку для скачивания в Javascript? [дубликат]

этот вопрос уже есть ответ здесь:

Как правило, HTML-страницы могут иметь ссылку на документы (PDF и т. д...) который можно загрузить с сервера.

предполагая веб-страницу с поддержкой Javascript, возможно ли динамически создать текстовый документ (например) из браузера пользователя и добавить ссылку для загрузки этого документа без круговой поездки на сервер (или минимальной)?

другими словами, пользователь нажимает на кнопку, javascript генерирует номера randoms (например) и помещает их в структуру. Затем javascript (например, JQuery) добавит ссылку на страницу, чтобы загрузить результат в виде текстового файла из структуры.

эта задача сохранить все (или по крайней мере большинство) нагрузки на стороне пользователя.

возможно ли это, если да, то как?

20
creation download dynamic file javascript

3 ответов

добавить URI данных на страницу можно вставить документ, который можно загрузить. Часть данных строки может быть динамически объединена с помощью Javascript. Вы можете отформатировать его как строку с кодировкой URL или как кодировку base64. Когда он закодирован в base64, браузер загрузит содержимое в виде файла. Вам нужно будет добавить скрипт или плагин jQuery для кодирования. Вот пример со статическими данными:

jQuery('body').prepend(jQuery('<a/>').attr('href','data:text/octet-stream;base64,SGVsbG8gV29ybGQh').text('Click to download'))
13

вот решение, которое я создал, которое позволяет создавать и загружать файл в одним щелчком мыши:

<html>
<body>
    <button onclick='download_file("my_file.txt", dynamic_text())'>Download</button>
    <script>
    function dynamic_text() {
        return "create your dynamic text here";
    }

    function download_file(name, contents, mime_type) {
        mime_type = mime_type || "text/plain";

        var blob = new Blob([contents], {type: mime_type});

        var dlink = document.createElement('a');
        dlink.download = name;
        dlink.href = window.URL.createObjectURL(blob);
        dlink.onclick = function(e) {
            // revokeObjectURL needs a delay to work properly
            var that = this;
            setTimeout(function() {
                window.URL.revokeObjectURL(that.href);
            }, 1500);
        };

        dlink.click();
        dlink.remove();
    }
    </script>
</body>
</html>

Я создал это, адаптировав код из это HTML5 демо и возиться с вещами, пока он не работал, поэтому я уверен, что есть проблемы с ним (пожалуйста, комментировать или редактировать, если у вас есть улучшения!) но это рабочий, один-клик решение.

(по крайней мере, он работает для меня на последней версии Chrome в Windows 7)

14

файл PDF? Нет. А . Да. С недавним HTML5 blob URIs. Очень простая форма вашего кода будет выглядеть примерно так:

window.URL = window.webkitURL || window.URL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var file = new window.BlobBuilder(),
    number = Math.random().toString(); //In the append method next, it has to be a string
file.append(number); //Your random number is put in the file

var a = document.createElement('a');
a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
a.download = 'filename.txt';
a.textContent = 'Download file!';
document.body.appendChild(a);

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

демо

Примечание: BlobBuilder - видимому, устарела. см. этот ответ, чтобы узнать, как использовать Blob вместо BlobBuilder. Спасибо @limonte за головы.

10