封装文件下载的方法

在src下建util文件夹  文件夹下建立util.js 封装方法

/**
 * @param {Object} params 文件相关信息
 * @param {String} params.attachId 附件ID
 * @param {String} params.url 请求地址（返回文件流的地址）
 * @param {String} params.method 请求方法
 * @param {String} params.fileName 请求方法
 * @desc 下载文件流方法
 */
 export const downloadFile = (params = {}) => {
  const url = params.url || `接口地址?attachId=${params.attachId}`
  return fetch(url, {
    method: params.method || 'get',
    cache: 'no-cache',
    headers: {
       'header': Cookies.get("accessToken") // 请求携带token
    }
  }).then(res => {
    // 切割出文件名
    const fileNameEncode = res.headers.get('content-disposition').split('filename=')[1]
    // 解码文件名
    const fileName = params.fileName || decodeURIComponent(fileNameEncode)
    const fileStream = streamSaver.createWriteStream(fileName, {
      size : res.headers.get("content-length")
    })
    const readableStream = res.body
    // more optimized
    if (window.WritableStream && readableStream.pipeTo) {
      return readableStream.pipeTo(fileStream)
          .then(() => console.log('done writing'))
    }
    window.writer = fileStream.getWriter()

    const reader = res.body.getReader()
    const pump = () => reader.read()
        .then(res => res.done
            ? window.writer.close()
            : window.writer.write(res.value).then(pump))
    pump()
  }).catch(() => Message.error("文件下载出错"))
}

调用方法  在页面中import {downloadFile} from "@/util/util";

然后就可以调用方法

//文件下载
      downloadEqFile(file) {
        // 调用文件流下载功能
        let params = {
          url:`接口?attachId=${id}`
        }
        downloadFile(params);
      },