如何在Javascript中创建动态文件+链接以供下载？ [复制]
Posted
技术标签:
【中文标题】如何在Javascript中创建动态文件+链接以供下载？ [复制]【英文标题】：How to create a dynamic file + link for download in Javascript? [duplicate] 【发布时间】：2012-01-08 18:52:39 【问题描述】：通常，html 页面可以链接到可以从服务器下载的文档（PDF 等...）。
假设一个启用 javascript 的网页，是否可以从用户浏览器中动态创建一个文本文档（例如）并添加一个链接来下载该文档而无需往返服务器（或最少的一个）？
换句话说，用户点击一个按钮，javascript 会生成随机数（例如），并将它们放入一个结构中。然后，javascript（例如 JQuery）将添加一个指向页面的链接，以从结构中下载结果作为文本文件。
此目标是将所有（或至少大部分）工作负载保留在用户端。
这是否可行，如果可行，如何？
【问题讨论】：
现在 2015 我们可以使用 Blob (MDN link) 来构建 URL 以下载任何动态创建的数据。 【参考方案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 中的代码并在它工作之前乱七八糟地创造了这个，所以我确信它存在问题（如果你有改进，请评论或编辑！）但它是一个 工作，单击解决方案。
（至少，它适用于 Windows 7 中最新版本的 Chrome）
【讨论】：
太棒了...将在 23 小时 55 分钟内奖励赏金... 这应该是公认的答案。它显示了创建数据 URI 的“艰苦”工作。不只是说你需要使用它们。 对于 Firefox，在调用 createElement() 之后需要 document.body.appendChild(dlink)，然后在 dlink.remove() 之后可能需要 document.body.removeChild(dlink)。 经过测试的 Firefox ：需要 document.body.appendChild(dlink) 但不需要 removeChild，remove() 就足够了。谢谢你啊哈夫和亚历山大！ 刚刚检查了 Chrome 版本 73.0.3683.103（官方构建）（64 位），工作！【参考方案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'))
【讨论】：
这在 IE 和 Edge 中不起作用：caniuse.com/#feat=datauri 这是不正确的。它将在 IE 和 Edge 中用于下载链接。对于 HTML 和 CSS 文件等页面资产，它在 IE/Edge 中不起作用。不过你可以下载 CSS，只是不要在<link> 标签中使用它。【参考方案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 的提醒。
【讨论】：
BlobBuilder 已弃用，请参阅***.com/a/15031019/1331425
@limonte 谢谢！将其编辑为答案以上是关于如何在Javascript中创建动态文件+链接以供下载？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React-Router 2.5 中创建动态链接到属性
如何将在我的 Javascript 中创建的字符串数组传递给 C# 代码隐藏文件？