【VUE3】下载文件流

VUE3+TS 下载文件流

/**
 * @description: 下载文件流
 * @param { string }  url    请求路径
 * @param { MISSING_TYPE }  params      请求参数
 */
export const downloadFile = <T = MISSING_TYPE>(url: string, params: T) => {
  //用于与服务器通信
  const xhr = new XMLHttpRequest()
  //用于打开服务器连接
  xhr.open('post', url, true)
  const headers = requestHeaders({
    //告诉服务器发送数据格式
    'Content-Type': 'application/json;charset=UTF-8',
  })
  //设置请求头
  Object.keys(headers).forEach((item) => {
    xhr.setRequestHeader(item, headers[item] as string)
  })
  // 存储下载文件内容
  xhr.responseType = 'arraybuffer'
  xhr.send(JSON.stringify(params))
  xhr.onload = function () {
    // 304表示资源未更改，通常用于缓存控制
    if (xhr.status === 200 || xhr.status == 304) {
      const blob = new Blob([xhr.response], {
        //Content-disposition用于指示文件是在浏览器打开还是下载到本地
        type: xhr.getResponseHeader('Content-Type') as string,
      })
      let name = window.decodeURI(
        xhr.getResponseHeader('Content-disposition')?.split(';')[1].split('filename=')[1] || ''
      )
      // URL.createObjectURL创建一个指向指定File对象/Blob对象的URL、将他作为链接
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = name as string
      a.href = url
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      //释放一个通过 URL.createObjectURL() 方法创建的 URL,防止内存泄漏
      URL.revokeObjectURL(url)
    }
  }
}

/**
 * @description: 请求头
 * @param { AxiosRequestHeaders } data  请求头参数
 */
 export type  AxiosRequestHeaders={ [x:string]:number|string|boolean}
export const requestHeaders=(data:AxiosRequestHeaders={}):AxiosRequestHeaders=>{
let headers={
...data,
[config.token]:'token'}
return headers
}