axios文件下载

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

axios二进制文件下载的问题

使用了content-disposition

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

解决办法:

1、设置responseTypeblob类型

    1. exportconst getScreenshot =params=>{

    1. returnaxios({

    1. method:'get',

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

    1. params,

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

    1. });

    1. };

2、axios拦截文件下载

    1. axios.interceptors.response.use(

    1. response =>{

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

    1. const headers = response.headers;

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

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

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

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

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

    1. }

    1. // blob类型

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

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

    1. blobType ='image/png';

    1. }

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

    1. // 下载

    1. createDownloadUrl(myBlob, fileName);

    1. return response.data;

    1. }

    1. }

    1. )

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

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

    1. function createDownloadUrl(blob, fileName){

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

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

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

    1. }else{

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

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

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

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

    1. tempLink.href = blobURL;

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

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

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

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

    1. }

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

    1. // 挂载a标签

    1. document.body.appendChild(tempLink);

    1. tempLink.click();

    1. document.body.removeChild(tempLink);

    1. // 释放blob URL地址

    1. window.URL.revokeObjectURL(blobURL);

    1. }

    1. }

以上是 axios文件下载 的全部内容, 来源链接: www.h5w3.com/123093.html

回到顶部