TypeScript实现文件下载

通常一个工程中会在多处出现文件下载导出等功能，可以将如下代码抽出来写在公共ts中，如utils.ts

实现目标：

正常返回 输出文件流
异常返回 输出错误信息

参考代码

/**
 * 文件下载
 * @param res 完整响应
 */
export function downLoadFile(res: any) {
  //  返回异常信息时请求头含'json'字样
  if (res.headers['content-type'].includes('json')) {
    const reader = new FileReader()
    reader.readAsText(res.data, 'utf-8')
    // 读取异常信息
    reader.onload = () => {
      if (reader) {
        const resStr = (reader?.result) as string
        const jsonObj = JSON.parse(resStr)
        Message.error(jsonObj.msg)
      }
    }
  } else {
    // 正常返回文件流是size通常大于0
    if (res.data.size) {
      // 读取后台返回的文件名
      const requestFileName = res.headers['content-disposition']
      let fileName = decodeURI(
        requestFileName.substring(
          requestFileName.indexOf('=') + 1,
          requestFileName.lastIndexOf('.')
        )
      )
      // 读取后台返回的文件扩展名
      const extension = requestFileName.substring(requestFileName.lastIndexOf('.'), requestFileName.length)
      const r = new FileReader()
      // 通过实现a标签点击下载文件
      r.onload = function() {
        fileName = fileName + extension
        const link = document.createElement('a')
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
      r.readAsText(res.data)
    } else {
      Message.error('后台无文件流返回')
    }
  }
}