Question

通常，HTML页面可以链接到文档（PDF等），可以从服务器下载。

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

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

此目标是将所有（或至少大部分）工作量保留在用户端。

这是否可行，如果是，如何？

Answer 1

以下是我创建的解决方案，您可以通过单击创建和下载文件：

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

我是通过调整this HTML5 demo中的代码创建的，然后搞砸了它直到它起作用，所以我确定它有问题（如果你有改进，请评论或编辑！）但它＆＃39; sa 工作，单击解决方案。

（至少，它适用于Windows 7中最新版本的Chrome）

Answer 2

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

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

Answer 3

PDF文件？不是。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很可能isn't supported。

Demo

注意： BlobBuilder似乎已被弃用。 Refer to this answer to see how to use Blob instead of BlobBuilder。感谢@limonte的提醒。

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

3 个答案: