如何让Web浏览器下载存储在JavaScript String中的文件？ [英] How to get a web browser to download a file that is stored in a JavaScript String?

问题描述

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

I've been able to write JavaScript to cause the browser to download a file from a remote server using code like this:

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

哪个工作很好。然而，现在我有一个不同的情况，文件的内容存储在我的JavaScript浏览器端的一个字符串，我需要触发该文件的下载。我已经尝试用这个替换上面的第三行，其中'myFileContents'是包含文件的实际字节的字符串：

Which works great. However, now I have a different situation where the contents of the file are stored in a string in my JavaScript on the browser side and I need to trigger a download of that file. I've tried replacing the third line above with this, where 'myFileContents' is the string containing the actual bytes of the file:

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

这将获取下载的文件，但文件名丢失。在Chrome中，文件名只是下载。另外我已经看到，在某些浏览器版本中允许的文件大小有限制。

This gets the file downloaded, but the file name is lost. In Chrome the file name is just 'download'. Also I've read that there are limitations to the file size allowed in some browser versions.

有没有办法实现？使用JQuery可以。解决方案需要支持任何文件类型 - zip，pdf，csv，png，jpg，xls等...

Is there a way to achieve this? Using JQuery would be OK. The solution needs to support any file type - zip, pdf, csv, png, jpg, xls, etc...

推荐答案

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

In some newer browsers you can use the new HTML5 download attribute on the a tag to achieve this:

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在大多数情况下目前不支持的主要浏览器。这可能不是很有用的，除了它可能会提供另一种方式来存储文件在本地，如果你可以这样做。但是，它不会将文件存储在用户本地可访问的文件系统上，您将需要开发自己的基于浏览器的界面，供用户与文件进行交互。在任何情况下，都可以使用 a 标签中的新的下载属性将文件从HTML5文件系统下载到用户本地文件系统，然后再引用位于HTML5文件系统中，而不是引用在线位置。

For a future solution you could look into the HTML5 FileSystem API, but this API is not currently supported in most of the major browsers. It might not be of much use to you except for that it might provide you with another way to store the files locally if you would be OK with that. But it doesn't store the files on the users locally accessible file system, you would have to develop your own browser based interface for your users to interact with the files. Downloading the files from the HTML5 file system to the users local file system would in any case again be done using the new download attribute on an a tag, which would then refer to a location in the HTML5 file system instead of referring to an online location.

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

To do this with an iframe element you would have to somehow set the Content-Disposition request header on the iframe to inline; filename="filename.txt" using client side JavaScript, I don't think it is possible to do this, most likely because of security issues. If you really don't have any other option, you could kill the download speed performance by sending the string to the server using AJAX and then downloading it from there again with the right request headers set.

这篇关于如何让Web浏览器下载存储在JavaScript String中的文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！