实现下载文件以及打包成压缩包

总结一下前端实现文件下载的方式。

第一种：使用 a 标签下载。当给a标签添加download属性时就可以下载对应文件，注意此方法只支持下载部分类型文件。

// 创建a标签
let a = document.createElement('a');
// 定义下载名称(跨域修改会失效)
a.download = 'input.txt';
// 隐藏标签
a.style.display = 'none';
// 设置文件路径
a.href = '';
// 将创建的标签插入dom
document.body.appendChild(a);
// 点击标签，执行下载
a.click();
// 将标签从dom移除
document.body.removeChild(a);

第二种：使用window.open( url ) 方式下载。但实测会有闪动，不推荐。

第三种：使用 FileSaver库 实现。第一个参数表示它支持 Blob/File/Url 三种类型，第二个参数表示文件名（可选），而第三个参数表示配置对象（可选）。

FileSaver saveAs(Blob/File/Url, filename, optional Object { autoBom })

有时候当我们需要下载多个文件并打包形成压缩包时，就可以使用 jszip 和 FileSaver 搭配实现。

// 引入实现下载压缩包的两个库
import JSZip from 'jszip';
import FileSaver from 'file-saver';
// 引入请求模块
import axios from 'axios'
// 实现下载压缩包按钮的方法
downloadZip(){
  const zip = new JSZip();
  const promises = [];  //用于存储多个promise
  this.fileArr.forEach( item => { 
    const promise = new Promise((resolve, reject) => {
      // 实现下载单个文件
      axios ({
        url: item.fileUrl,
        method: 'GET',
        responseType: 'blob'
      }).then((res) => {          //request请求的状态
        resolve(res)
      }).catch((error) => {
        reject(error)
      })
    }).then((res) => {            
      // 单个文件下载成功，拿到内容命名后转为二进制存储
      let fileName = item.fileName;
      // 在此处可以设置压缩包文件夹  zip.file(文件夹名/文件名, 文件内容 ,{配置项});
      zip.file(fileName, res.data ,{binary: true});
    })
    // 将单个promise存到数组中，后续使用promise.all判断整体状态
    promises.push(promise);
  })
  Promise.all(promises).then(() => {
    // 将压缩包里的文件压缩，返回一个promise实例，成功结果res返回的就是压缩包
    zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",  // STORE：默认不压缩 DEFLATE：需要压缩
      compressionOptions: {
        level: 9               // 压缩等级1~9    1压缩速度最快，9最优压缩方式
      }
    }).then((res) => {
      FileSaver.saveAs(res, "结果压缩包.zip") // 利用file-saver保存文件
    })
  })
}

好啦，简单总结就到这里，下次再见~