8

我已经能够编写 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 等...

4

1 回答 1

10

在一些较新的浏览器中，您可以使用标签上的新HTML5 下载属性a来实现此目的：

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 。它可能对您没有多大用处，除了它可能为您提供另一种在本地存储文件的方式，如果您愿意的话。但它不会将文件存储在用户本地可访问的文件系统上，您必须开发自己的基于浏览器的界面，以便用户与文件进行交互。在任何情况下，将文件从 HTML5 文件系统下载到用户本地文件系统都将再次使用a标签上的新下载属性完成，然后该标签将引用 HTML5 文件系统中的位置，而不是引用在线位置。

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

于 2013-05-08T22:47:33.380 回答