前端实现各种文件下载

前言

因为前段时间在做一个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对照表）

//链接转base64
    convertImgToBase64(url, callback, outputFormat) {
   
      var canvas = document.createElement("CANVAS"),
        ctx = canvas.getContext("2d"),<