如何让 Web 浏览器下载存储在 JavaScript 字符串中的文件？

Posted 2023-02-19

【中文标题】如何让 Web 浏览器下载存储在 JavaScript 字符串中的文件？

【英文标题】：How to get a web browser to download a file that is stored in a JavaScript String?

【发布时间】：2013-05-03 06:39:06

【问题描述】：

我已经能够编写 javascript 以使浏览器使用如下代码从远程服务器下载文件：

var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "filename.zip"
document.body.appendChild(iframe);

效果很好。但是，现在我遇到了另一种情况，文件的内容存储在浏览器端 JavaScript 中的字符串中，我需要触发该文件的下载。我试过用这个替换上面的第三行，其中 'myFileContents' 是包含文件实际字节的字符串：

iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents);

这会下载文件，但文件名会丢失。在 Chrome 中，文件名只是“下载”。我还了解到，某些浏览器版本允许的文件大小存在限制。

有没有办法做到这一点？使用 JQuery 就可以了。该解决方案需要支持任何文件类型 - zip、pdf、csv、png、jpg、xls 等...

【参考方案1】：

在some newer browsers 中，您可以使用a 标签上的新html5 download attribute 来实现：

var a = document.createElement('a');
a.download = "filename.txt";
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents);
a.click();

对于未来的解决方案，您可以查看 HTML5 FileSystem API，但此 API 是 not currently supported in most of the major browsers。它可能对您没有多大用处，除了它可能为您提供另一种在本地存储文件的方式，如果您愿意的话。但它不会将文件存储在用户本地可访问的文件系统上，您必须开发自己的基于浏览器的界面，以便用户与文件进行交互。在任何情况下，将文件从 HTML5 文件系统下载到用户本地文件系统都将再次使用 a 标记上的新下载属性完成，然后该标记将引用 HTML5 文件系统中的位置，而不是引用在线位置。

要使用 iframe 元素执行此操作，您必须使用客户端 JavaScript 以某种方式将 iframe 上的 Content-Disposition 请求标头设置为 inline; filename="filename.txt"，我认为不可能这样做，很可能因为安全问题。如果您真的没有任何其他选择，您可以通过使用 AJAX 将字符串发送到服务器然后再次从那里下载并设置正确的请求标头来降低下载速度性能。

【讨论】：

谢谢。我确实找到了另一个帖子，其中有人提到了将文件内容和文件名发布到 Web 服务器的技巧，然后让它返回带有 Content-disposition 标头的完整响应。示例实现在这里：code.google.com/p/download-data-uri。由于冗余传输的性能问题，我试图避免这种方法。我将尝试“a.download”技巧并查看哪些浏览器支持它。谢谢。

您的解决方案在 Chrome 中运行良好，但目前无法在任何其他浏览器中运行。在提出更好的建议之前，我会接受这个答案。我在想可能还有一种方法可以将 iframe 技巧与某种假 ajax 帖子和假响应一起使用，但我不知道该怎么做。

您可以使用var clickEvent = document.createEvent("MouseEvent"); clickEvent.initEvent("click", true, true); a.dispatchEvent(clickEvent); 代替a.click() 使其在Firefox 和Chrome 中工作

这现在不适用于 Chrome 65 developers.google.com/web/updates/2018/02/…