axios文件下载

• Z时代
• 2024-01-10
• 分类：技术分享

首先确定下载头是这个样子

使用了content-disposition

content-disposition: attachment; filename="screenshot.png"

解决办法：

1、设置responseType为blob类型

1. 1. exportconst getScreenshot =params=>{

1. 1. returnaxios({

1. 1. method:'get',

1. 1. url:'/api/screenshot',// 请求地址

1. 1. params,

1. 1. responseType:'blob',// 设置接收格式为blob格式

1. 1. });

1. 1. };

2、axios拦截文件下载

1. 1. axios.interceptors.response.use(

1. 1. response =>{

1. 1. // 判断文件是否为导出（下载到电脑）

1. 1. const headers = response.headers;

1. 1. if(headers['content-disposition']){

1. 1. const contentDisposition = response.headers['content-disposition'];

1. 1. let fileName =`test_${new Date().getTime()}.csv`;

1. 1. if(/filename=/.test(contentDisposition)){

1. 1. fileName = contentDisposition.split('filename=')[1].replace(/"/g,'');

1. 1. }

1. 1. // blob类型

1. 1. let blobType ='application/octet-stream';

1. 1. if(/\.png/gi.test(fileName)){

1. 1. blobType ='image/png';

1. 1. }

1. 1. const myBlob =newBlob([response.data],{ type: blobType });

1. 1. // 下载

1. 1. createDownloadUrl(myBlob, fileName);

1. 1. return response.data;

1. 1. }

1. 1. }

1. 1. )

上面特别要注意的，new Blob第一个参数是一个数组对象

createDownloadUrl下载方法，实际上就创建了一个A链接，设置了download属性

1. 1. function createDownloadUrl(blob, fileName){

1. 1. if(typeof window.navigator.msSaveBlob !=='undefined'){

1. 1. // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件

1. 1. window.navigator.msSaveBlob(blob, decodeURI(fileName));

1. 1. }else{

1. 1. // 创建新的URL并指向File对象或者Blob对象的地址

1. 1. const blobURL = window.URL.createObjectURL(blob);

1. 1. // 创建a标签，用于跳转至下载链接

1. 1. const tempLink = document.createElement('a');

1. 1. tempLink.href = blobURL;

1. 1. tempLink.setAttribute('download', fileName);

1. 1. // 兼容：某些浏览器不支持HTML5的download属性

1. 1. if(typeof tempLink.download ==='undefined'){

1. 1. tempLink.setAttribute('target','_blank');

1. 1. }

1. 1. tempLink.style.display ='none';

1. 1. // 挂载a标签

1. 1. document.body.appendChild(tempLink);

1. 1. tempLink.click();

1. 1. document.body.removeChild(tempLink);

1. 1. // 释放blob URL地址

1. 1. window.URL.revokeObjectURL(blobURL);

1. 1. }

1. 1. }

以上是 axios文件下载 的全部内容， 来源链接： utcz.com/a/123093.html