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

How to get a web browser to download a file that is stored in a JavaScript String?

本文关键字：字符串 JavaScript 文件 存储 web 浏览器 下载      更新时间：2023-09-26

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

在一些较新的浏览器中，你可以在a标签上使用新的HTML5下载属性来实现这一点:

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

对于未来的解决方案，你可以看看HTML5文件系统API，但是这个API目前在大多数主流浏览器中都不支持。它可能对您没有太大用处，除非它可能为您提供另一种本地存储文件的方法，如果您愿意的话。但是它不会将文件存储在用户本地可访问的文件系统上，您必须开发自己的基于浏览器的界面，以便用户与文件进行交互。将文件从HTML5文件系统下载到用户本地文件系统将在任何情况下再次使用a标记上的新下载属性，这将引用HTML5文件系统中的位置，而不是引用在线位置。

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

相关文章：