如何在Javascript中创建动态文件+链接以供下载？

Question

如何在Javascript中创建动态文件+链接以供下载？

Jér*_*nge 23 javascript file creation dynamic download

通常,HTML页面可以链接到可以从服务器下载的文档(PDF等).

假设启用了Javascript的网页,是否可以从用户浏览器中动态创建文本文档(例如)并添加链接以下载此文档而无需往返服务器(或最小的一个)？

换句话说,用户会点击一个按钮,javascript会生成randoms数字(例如),并将它们放在一个结构中.然后,javascript(例如JQuery)将添加到页面的链接以将结果作为文本文件从结构下载.

此目标是将所有(或至少大部分)工作负载保留在用户端.

这是可行的,如果是的话怎么样？

Answer 1

ahu*_*f44 22

下面是我创建了一个解决方案,它允许您创建,并在下载文件只需点击一下:

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

Run Code Online (Sandbox Code Playgroud)

我通过调整这个HTML5演示中的代码创建了这个,然后搞乱了它直到它工作,所以我确定它有问题(如果你有改进,请评论或编辑!)但它是一个有效的单击解决方案.

(至少,它适用于Windows 7中最新版本的Chrome)

对于Firefox，您需要在调用createElement（）之后需要document.body.appendChild（dlink），然后大概在dlink.remove（）之后需要document.body.removeChild（dlink）。 (3认同)
这应该是公认的答案。它显示了创建数据URI的“艰巨”工作。不只是说您需要使用它们。 (2认同)

Answer 2

Nat*_*arr 13

通过在页面中附加数据URI,您可以在可以下载的页面中嵌入文档.字符串的数据部分可以使用Javascript动态连接.您可以选择将其格式化为URL编码字符串或base64编码.当它是base64编码时,浏览器会将内容作为文件下载.您必须添加脚本或jQuery插件才能进行编码.以下是静态数据的示例:

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Som*_*Guy 10

一个PDF文件？没有.一个txt文件.是.使用最近的HTML5 blobURI.代码的一个非常基本的形式看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

您可以使用其他答案中提到的其他方法作为回退,因为BlobBuilder可能不受支持.

演示

注意: BlobBuilder似乎已被弃用.请参阅此答案以了解如何使用Blob而不是BlobBuilder.感谢@limonte的领导.

归档时间：	14 年前
查看次数：	52410 次
最近记录：	9 年，4 月前