使用客户端脚本生成下载答案

【问题标题】：Spawn Download with Client Side Script使用客户端脚本生成下载
【发布时间】：2014-09-04 04:05:54
【问题描述】：

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

有没有办法使用纯粹的客户端脚本生成这样的下载操作，而不会将内容发布到服务器并回显？

【问题讨论】：

【解决方案1】：

我发现了如何做到这一点：您可以使用Blob、createObjectURL() 和anchor 标签。

这个 JSFiddle 展示了一个适用于 Chrome 和 Internet Explorer 的解决方案，甚至支持在 Chrome 中拖放保存（您可以将保存按钮拖到 Windows 资源管理器中以保存文档。）http://jsfiddle.net/fa9y6/9/

首先，你必须构造一个Blob来保存：

var blob = new Blob([ $('#documentContent').val() ], { type: mimeType });

在 Internet Explorer 中将其保存为文件是最简单的：

if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename); 
}

在 Chrome（和 Firefox）中，您可以构造一个 anchor 标签和 click() 它：

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(':'));
         }
     });
}

（我没有在旧版浏览器中进行彻底的浏览器兼容性测试。）

【讨论】：

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

【解决方案2】：

查看FileSaver.js，它提供了saveAs 函数：

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

兼容IE10+。

【讨论】：