浏览器端用JS创建和下载文件

浏览器端用JS创建和下载文件

1 需求

前端需要把获取的数据生成文件让用户下载，按照以往生成 a 标签 href 指向目的文件，不仅需要有已经生成的文件服务器路径，而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载

2 解决方案

2.1 下载取代加载：H5标签属性

HTML5 中 a 标签增加了 download 属性，点击链接时浏览器不会打开链接指向的文件，而是改为下载（目前只有chrome、firefox和opera支持），下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改，如: download=“file.js”)

2.2 生成文件：DataURI

用js将内容生成文件可以仿照图片 DataURI 的方式

<img src=”data:image/gif;base64,R0lGOXXXXX">

封装成一个下载方法

function downloadFile(aLink, fileName, content){
    aLink.download = fileName;
    aLink.href = "data:text/plain," + content;
}

调用 downloadFile 后，用户点击链接触发浏览器下载

3 改进方案

进一步放宽条件

• 取消下载类型限制
• 取消点击过程，直接下载

解决文件类型的问题，可用浏览器新API（URL.createObjectURL）来解决，URL.createObjectURL 通常用来创建图片 DataURI 显示图片，这里用来下载文件，参数是 File对象(通过input[type=file]选择的文件)或 Blob 对象(二进制大对象)，让浏览器自动设定文件类型

解决类型限制：用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

文件自动下载：构建UI点击事件，再自动触发

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

调用downloadFile，文件自动下载