前端实现各种文件下载

前言

因为前段时间在做一个Excel文件下载功能需求的时候，绕来绕去弄了许久，现在空出时间来总结一下前端实现各种资源下载的方案，以作保存。

使用a标签进行下载

最简单的下载方式是用a标签进行下载，然后设定download为文件名，但是这种方法有一定的局限性，分两种情况，第一种：下载的文件本身在项目文件夹下一般设置了download属性都能够成功下载，当属于这种情况时，使用a标签是最简单方便的方式了；第二种：下载的文件为网络文件，就是一个资源文件，当这个资源文件的文件格式使用浏览器可以直接打开时点击a标签会直接预览文件，当文件格式浏览器不能直接打开时才会触发下载（各个浏览器下载行为有可能不一样）

<a href="./test.txt" download="文件.txt">下载</a>

配合download.js下载各种资源

download.js文档

1、图片下载
图片下载需要先将图片转成base64，这里提供使用canvas转base64方法，在callback里可以获取到base64,拿到base64之后使用download.js进行下载，下载时需要根据下载文件格式设置content-type（content-type对照表）

//链接转base64convertImgToBase64(url, callback, outputFormat) {var canvas = document.createElement("CANVAS"),ctx = canvas.getContext("2d"),img = new Image();img.crossOrigin = "Anonymous";img.onload = function() {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL(outputFormat || "image/png");callback.call(this, dataURL);canvas = null;};img.src = url;}

2、视频下载
视频的下载需要提供一个公告可访问的资源链接，在谷歌浏览器下使用video标签，在video控件里有下载按钮，但是根据浏览器不同而有不同表现，有的浏览器可能直接就没有那个下载按钮，如果项目允许的话，直接用原生的下载按钮是最好不过的了，但是有的需求往往就是需要你做一个下载按钮，这种情况的话也可以实现，这里配合axios实现，代码如下

//下载视频downloadVideo(src) {axios({methods: "GET",url: src,responseType: "blob"//设置为blod流}).then(res => {download(res.data, src);//调用download.js}).catch(() => {console.log("视频下载失败");});},

这种方法算比较笨的方法，如果视频比较大的话用户体验不好，如果不是那种只有一个链接的视频，链接资源还不在项目服务器的，才可考虑使用这样的方式，正常情况下视频下载还是交由后端处理比较妥当。

3、post请求下载文件

前段时间，做了一个Excel表格的下载功能，根据上传的字段不同下载的表格不同，本来看起来挺好实现的一个功能，一做才知道，后端给的下载接口请求的是DOC而不是XHR，虽然这种请求接口能够使用form表单action属性进行下载文件，但是这种写法比较麻烦可能需要写多个input，而且DOC请求如果出错后端一般是直接给一个json，也就是说请求失败了浏览器会直接打开一个json文件，这种情况下是不好做异常处理的。因此我又用axios多试了几次，试出了方案，其实和图片的下载差不太多，主要是异常处理那里需要做一些改变，代码如下：

axios({method: 'post',url:src,data: {}
}).then(({ data }) => {if (data.type == "application/json") {console.log("下载失败");return;}download(data,"文件名.xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");});

总结

前端实现下载文件总的来说基本都可以用download.js实现，只要把下载的文件转成支持的格式即可