Vue 项目中如何使用axiso下载文件

今天就调用后端接口下载excel文件为例子

首先申明下载接口

export const exportChargeRecord = (ids) => {
  return request({
    url: '/api/ad-pay-service/sysForm/admin/export-charge-record',
    method: 'get',
    responseType: 'blob',
    params: {
      ids
    }
  })
};

然后在 methods 中创建导出方法,调用即可

        exportChargeRecord(ids.join(",")).then(res => {
          let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8\''})
          // 这里的类型,设置的是你下载文件的具体类型. 不同的文件类型可能不一样. 需要自己指定. 
          let downloadElement = document.createElement('a');
          let contentDisposition = res.headers['content-disposition'];
          let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
          let result = patt.exec(contentDisposition);
          let filename = decodeURI(result[1]);
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = filename; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放blob对象
        })

这里的exportChargeRecord 这里是一个axios 封装的方法, 这里需要小心的是, res.data可能无法下载,很多人可能是直接返回的文件流,也就是说res就是一个文件流, 直接使用res即可,如果你将文件流放在res的其他字段的话,需要指定具体的字段才行.