首页 文章

如何在Javascript中创建动态文件链接以供下载？ [重复]

提问于
浏览 次
21

这个问题在这里已有答案：

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

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

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

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

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

javascript file dynamic download creation

3 回答

  • 16

    通过在页面上附加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'))
    回复于
  • 10

    这里创建了's a solution I'，允许您在 single click 中创建和下载文件：

    <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中的代码来创建它，然后搞乱事情直到它工作，所以我'm sure there are problems with it (please comment or edit if you have improvements!) but it' s a working, single-click solution.

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

    回复于
  • 13

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

    Note: BlobBuilder 似乎已被弃用 . Refer to this answer to see how to use Blob instead of BlobBuilder . 感谢@limonte为抬头 .

    回复于

相关问题