Javascript 使用客户端脚本生成下载

Javascript 使用客户端脚本生成下载,javascript,download,client,Javascript,Download,Client,在运行客户端、浏览器和Javascript编写的应用程序中,可以使用本地存储来持久化状态。如果用户需要能够从客户端应用程序中提取数据,一个选项是将内容发布到服务器,并让服务器使用正确的内容类型和其他头将其回显,以生成下载操作 是否有任何方法可以使用纯客户端脚本生成这样的下载操作,而无需将内容发布到服务器并回显?我发现了如何实现这一点:可以使用Blob,createObjectURL()和锚定标记 这个JSFIDLE展示了一个在Chrome和Internet Explorer中工作的解决方案,甚至

在运行客户端、浏览器和Javascript编写的应用程序中,可以使用本地存储来持久化状态。如果用户需要能够从客户端应用程序中提取数据,一个选项是将内容发布到服务器,并让服务器使用正确的内容类型和其他头将其回显,以生成下载操作


是否有任何方法可以使用纯客户端脚本生成这样的下载操作,而无需将内容发布到服务器并回显?

我发现了如何实现这一点:可以使用
Blob
createObjectURL()
锚定
标记

这个JSFIDLE展示了一个在Chrome和Internet Explorer中工作的解决方案,甚至支持在Chrome中拖放保存(您可以将保存按钮拖动到Windows资源管理器中保存文档)

首先,必须构造一个
Blob
来保存:

var blob = new Blob([ $('#documentContent').val() ], { type: mimeType });
在Internet Explorer中将其保存为文件是最简单的:

if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename); 
}
在Chrome(和Firefox)中,您可以构造一个
锚定
标记并
单击()
它:

var a = document.createElement('a');
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.click();
if (a.remove) a.remove();
要支持拖放文件保存,您需要将处理程序附加到
dragstart

if (window.chrome) {
     document.body.addEventListener('dragstart', function(e) {
         // Some use a class, here. My sample only has one save button.
         if (e.target.id == 'downloadButton') {      
             var blob = new Blob([ $('#documentContent').val() ], { type: mimeType });
             e.dataTransfer.setData('DownloadURL', [mimeType, $('#fileName').val(), window.URL.createObjectURL(blob)].join(':'));
         }
     });
}
(我没有在较旧的浏览器版本中执行彻底的浏览器兼容性测试。)

检查提供
saveAs
功能的:

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

它与IE10+兼容。

我在一个项目中测试了自己