前言
前端如何实现下载文件呢?随着前端技术的发展，越来越多的前端需求中会出现下载文件这样的需求。
看着掘金很多人在近期不断的分享有关的文章，我总结了下自己的经验，根据不同情况，总结了一篇算是前端文件下载的通识篇，如果你对这方面完全不懂或者没有任何方案，那么本文会给你一个很不错的启示。
方案一 ：原生提交，后端返回文件流
这种方式是利用form.submit直接向后端提交,后端返回文件流生成的文件，后端处理成功后会直接返回到页面，浏览器会整理并打开自己的保存下载文件机制 。
优点 ：没有兼容问题，传统方式
缺点：拿不到后端处理这个过程的时机，无法根据回调函数做交互以及进度提示
// 后端参考代码
return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", HttpUtility.UrlEncode("咨询记录导出.xls", Encoding.GetEncoding("UTF-8")));
// 参考代码
function exportRecord() {
var $form = $("<form>"); //定义一个form表单
$form.hide().attr({target:'',method:'post','action':'/xxx'});
var $input = $("<input>");
$input.attr({"type":"hidden","name":'req'}).val(req);
$form.append($input).appendTo($("body")).submit().remove();
}
方案 二 ：ajax提交，后端返回在线文件地址
利用ajax或者新生的axios去提交请求，后端会返回一个线上的文件地址，前端可以通过原生的window.open打开这个地址就可以实现下载；也可以通过a标签设置href以及download属性，并自动点击实现其下载功能，关于其兼容性问题，可以判断download属性是否存在来弥补。
优点 ：可以拿到其返回时机，可以做交互
缺点 ：线上会存储大量的中间临时文件，可以用设置时限来优化。另外涉及用户隐私的问题，可以用token等验证机制实现。
// 参考方案
$.ajax({
type: "post",
url: "/xxx",
data: data,
success: function (res) {
tool.loadingend();
if(res.Status){
// window.open或者a标签下载
var isSupportDownload = 'download' in document.createElement('a');
if(isSupportDownload){
var $a = $("<a>") ;
$a.attr({href:res.url,download:'filename'}).hide().appendTo($("body"))[0].click();
}else{
window.open(res.url)
}
}else{
tool.tip(res.Message);
}
}
})
- a标签download属性
- 方案二 ：补充方案 ：利用form表单提交下载文件(ajax无法直接处理返回的文件类型),用于解决window.open方案被浏览器拦截的情况。
let $form = $("<form>") ;
$form.attr({method:"get",action:res.Message}).hide();
let queryStr = res.Message.split("?")[1];
let queryObj = qs.parse(queryStr) ;
$("body").append($form);
for(let p in queryObj){
let $input =$("<input type='hidden'>") ;
$input.attr({"name":p,value:queryObj[p]}).appendTo($form);
}
$form.submit().remove();
方案三 ：前端利用download模块进行下载
支持场景 ：
与上面的方案相比，这个模块提供的方案更加完善，而不是局限于某种方案，使用率很高。在源码中，我们可以看到在这个模块中针对各个浏览器和相应的属性是否支持进行了比较全面的兼容。其对应的下载文件方案包括了以下几种。
- window.open(url)打开某个文件地址
- iframe的框架中，设置src属性，通过iframe进行文件的下载，支持文件地址
- 通过form标签，设置action的文件地址，然后通过form的提交来完成文件的下载（支持二进制）
方案小结：
对于常规的支持文件地址的下载，兼容性非常好，而对于传统的文件流性质的，通过form标签也可以进行简单的支持，可以说是非常好的方案了。当然如果你需要那么全面的方案，大多数情况用其中一个就可以了。
方案四 ：h5新生方案下载
这个我觉得张鑫旭大佬介绍的蛮多的，应该上手足够了，就不多介绍了。除了a标签提供的download属性，多介绍了一种html:blob的方式。另外针对图片可以通过base64的方式。
传送门：h5新方式下载文件
个人建议：虽然新技术很好，但酌情使用，而且这里没有考虑任何兼容，也没有谈论到其他的一些文件类型，比如表格，pdf，大文件，视频音频的下载情况等。所以不是很建议把这个当做很常规的方案来考虑。
方案五 ：file-saver
模块地址：https://npm.taobao.org/package/file-saver，推荐使用，下载量以及稳定性足够好。支持新出的h5特性的加载方式，也就是方案五的部分。
github托管地址：https://github.com/eligrey/FileSaver.js
在模块的介绍中：详细说明了浏览器支持的情况，以及可以支持的下载范围，保存为的文件类型，与其我们去用基础知识踩雷，还是建议大家用成熟的模块方案去解决需求相关的问题。支持不了就退步用传统的方案解决，让后端提供直接的文件地址，要知道后端有更多的成熟的技术架包，对于前端来说还是萌新不确定的方案，后端早已经有了答案。
说明：我们之前的需求是希望下载一个表格文件，之前的方案是用后端生成文件地址，然后进行下载，其设置的返回response content type 为application/vnd.ms-excel （常规类型application/json）。后面发现有这个模块，基本使用还是体验蛮好的，此时的约定变成了后端根据查询的数据生成一个二进制的文件流，这样的好处是如果么有必要的时候可以减少在阿里云或者其他服务器暂存很多文件。
拓展思考下：在大家的公司里有没有遇到过类似的需求，按照我之前的经验是本来是想后端返回一个生成之后的文件地址，但后端的回复是由于采用了负载均衡，这个地址再去请求时不一定会请求到这个服务器，所以之前的前后端协调方案是放到了阿里云，然后通过设置权限和时效来保证文件的临时性，用户也可以在相似请求时不用重复请求数据库，重新生成文件，因为重复的数据内容会直接返回已经上传到阿里云的文件地址。
源码解析：
在其源码中，主要是针对返回的http的resonsetype做了要求，然后针对返回的地址进行处理，其中涉及到重要的代码：
//利用a标签下载
var a = document.createElement('a')
a.href = blob
//触发点击事件
node.dispatchEvent(new MouseEvent('click'))
// reader 进行解析
var reader = new FileReader()
var url = reader.result
//得到可解析的地址
_global.URL || _global.webkitURL，
URL.createObjectURL(blob)
//对 cors 跨域是否支持
return xhr.status >= 200 && xhr.status <= 299
filereader的官方介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
总结
综上，无论是偏传统的方案，还是比较全面兼容的根据文件地址下载的方式，还是h5新出的webapi的方式都有比较好的认识，如果你对相关的知识点或者方案有进一步研究的兴趣，建议针对官方api的相关文章或者已经开源出的两个模块进行深度的优化和研究效率更佳。
觉得还不错，给个赞加关注吧，谢谢大家的支持。
