文件下载功能

对于文件的下载，目前知道后端有两种返回形式：
① 返回blob文本流
②返回文件的url链接

参考文章1
参考文章2
一、通过a标签直接下载

1. 直接调用a标签进行下载（a标签只支持非图片和非PDF下载，这两种格式a标签只提供查看功能）

<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a>

在a标签中的href中加上文件的地址；
downloa属性可设置下载文件的名称，为必须值。

2. 可以在js中创建a标签，进行下载。（适用于异步获取文件url时使用）

// 创建a标签
let a = document.createElement('a')
// 定义下载名称
a.download = '文件名称'
// 隐藏标签 
a.style.display = 'none'
// 设置文件路径
a.href = 'https://.../158ac1e6917445a4aa384a2a7209445a.xlsx'
// 将创建的标签插入dom
document.body.appendChild(a)
// 点击标签，执行下载
a.click()
// 将标签从dom移除
document.body.removeChild(a)

3. 可以直接使用window.open(‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’),也可以实现a标签的功能
4. window.location.href=‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’
   或location.href=‘https://…/158ac1e6917445a4aa384a2a7209445a.xlsx’,
   他们是一样的表达，实现效果跟a标签一样。

二、通过后端返回blob（文本流）进行下载

1. URL.createObjectURL()

handleDownload(file) {
  service.get(`/download?fileId${file.id}`,{responseType: 'blob'}).then((blobContent)=>{
      let a = document.createElement('a')
      a.download = file.fileName
      a.style.display = 'none'
      let url = URL.createObjectURL(blobContent)
      a.href = url
      document.body.appendChild(a)
      a.click()
      URL.revokeObjectURL(url) // 销毁
      document.body.removeChild(a)
  }
},

2. FileReader.readAsDataURL()

handleDownload(file) {
  service.get(`/download?fileId${file.id}`,{responseType: 'blob'}).then((blobContent)=>{
      // 创建FileReader实例
      const reader = new FileReader()
      // 传入被读取的blob对象
      reader.readAsDataURL(blobContent)
      // 读取完成的回调事件
      reader.onload = (e) => {
        let a = document.createElement('a')
        a.download = file.fileName
        a.style.display = 'none'
        // 生成的base64编码
        let url = reader.result
        a.href = url
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
  }
},