如何获得一个网页浏览器下载存储在一个JavaScript字符串文件?(How to get a we

2019-09-02 07:39发布

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

Answer 1:

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

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

对于未来的解决方案,你可以看看到HTML5文件系统API ,但此API 未目前大多数的主流浏览器的支持 。 它可能不是除了它可能为你提供另一种方法来在本地存储文件,如果你将与OK多大用你的。 不过,这并不存储在用户的本地文件访问的文件系统,你就必须开发自己的基于浏览器的界面,您的用户与这些文件交互。 从HTML5文件系统到用户本地文件系统中下载这些文件在任何情况下再次使用上一个新的下载属性做a标记,那么这将是指一个位置,在HTML5文件系统,而不是指的是一个在线的位置。

为了与做iframe ,你会以某种方式设置元素Content-Disposition请求头的iframe来inline; filename="filename.txt" inline; filename="filename.txt"使用客户端的JavaScript,我不认为这是可能做到这一点,很可能是因为安全问题。 如果你真的没有任何其他选择,你可以通过发送字符串使用AJAX的服务器,然后从那里再次确立正确的请求头下载它杀死的下载速度性能。



文章来源: How to get a web browser to download a file that is stored in a JavaScript String?