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

Обычно страницы HTML могут иметь ссылку на документы (PDF и т.д.), которые можно загрузить с сервера.

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

<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)

Ответ 3

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

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 для хэдз-апов.