前端读取文件名并下载

1. axios 还回响应全部数据

service.interceptors.response.use((response: AxiosResponse) => {
  const result = response.data;
  const { config: { responseType } } = response;
  if (responseType === 'blob') {
    return response;
  }

2接口调用还回中读取解码

getExport().then((res:any) => {
          const fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1];
// 转换编译content-disposition的文件名：decodeURI
          downloadFile(decodeURI(fileName), res.data);
        });

3.文档流下载方法

export function downloadFile(fileName:string, content:Blob, unicode = 'application/octet-stream;charset=utf-8'):void {
  // const blob = new Blob([content], { type: unicode });
  if ('download' in document.createElement('a')) { // 非IE下载
    const downloadElement = document.createElement('a');
    let href = '';
    if (window.URL) {
      href = window.URL.createObjectURL(content);
    } else {
      href = window.webkitURL.createObjectURL(content);
    }
    downloadElement.href = href;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    if (window.URL) {
      window.URL.revokeObjectURL(href);
    } else {
      window.webkitURL.revokeObjectURL(href);
    }
    document.body.removeChild(downloadElement);
  } 

第二种方法
请求响应还回的必须是response 里面包含header 不能是response.date

export function download(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      //   和后端协商好下载方法post/get?
      method: 'Post',
      url: url,
      data: params,
      headers: {
        'Content-Type': 'application/json'
      },
      responseType: 'blob'
    })
      .then((res) => {
        console.log(res)
        // const fileName = res.headers['content-disposition'].split('filename=')[1]
        const fileName = '采购' + new Date().toLocaleString() + '.xlsx'
        const response = res.data
        const r = new FileReader()
        r.onload = () => {
          try {
            const resData = JSON.parse(this.result)
            if (resData) {
              if (resData.error_no === undefined) {
                throw new Error('解析成功！')
              } else if (resData.error_no !== '0') {

              }
            }
          } catch (err) {
            // 兼容ie11
            if (window.navigator.msSaveOrOpenBlob) {
              try {
                const blobObject = new Blob([response])
                window.navigator.msSaveOrOpenBlob(blobObject, fileName)
              } catch (e) {
                console.log(e)
                reject(e)
              }
              return
            }
            const url = window.URL.createObjectURL(new Blob([response]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
          }
        }
        r.readAsText(response)
        resolve()
      })
      .catch((error) => {
        console.log(error)
        reject(error)
      })
  })
}