前端解析文件流

第一种方法，转blob对象

this.$axios({url: `/md2api/attachment/c/${val.code}`,method: "GET",responseType: 'blob',   //设置响应格式headers: {"Content-Type": "application/x-www-form-urlencoded",},
})
.then(function (response) {let b = new Blob([response.data]);     //拿到文件流下载对象let url = window.URL.createObjectURL(b);  //生成文件流下载链接let a = document.createElement('a');      //创建一个a标签用来跳转a.href = url;                             // a标签 href  赋值 链接  a.download = 'ing.jpeg';                  //设置下载文件的文件名和文件格式document.body.appendChild(a);             //将标签DOM，放置页面a.click();                              window.URL.revokeObjectURL(url);     //释放 url 对象内存document.body.removeChild(a);        //移除标签节点
})
.catch(function (error) {console.log(error);
});

第二种方法（采用 FileReader 实例对象调用Api ，处理文件流）

this.$axios({url: `/md2api/attachment/c/${val.code}`,method: "GET",responseType: 'blob',   //设置响应格式headers: {"Content-Type": "application/x-www-form-urlencoded",},
})
.then(function (response) {const reader = new FileReader();   //  实例化 FileReaderreader.readAsDataURL(response.data); //将读取到的文件编码成DataURLreader.onload = (e) => {      //调用API onload  文件读取成功时触发   //模拟a标签点击let a = document.createElement('a');   //创建a标签，a.download = Date.parse(new Date()) + '.jpeg';   //设置格式a.href = e.target.result;               //下载文件流链接document.body.appendChild(a);           //将标签DOM，放置页面a.click();document.body.removeChild(a);          //移除标签节点};reader.onerror = (e) => {this.$message({message: '解析文件发生错误',type: 'warning'});};reader.onabort= (e) => {this.$message({message: '解析文件发生意外终止',type: 'warning'});}})
.catch(function (error) {console.log(error);
});