我要评论vue axios利用blob实现文件浏览器下载
在vue中，使用axios向后台请求数据，但只接收返回的response并不能实现浏览器下载，所以需要借助于blob实现文件的浏览器下载，分为两种情况，一种是get请求，使用params，另一种使用post请求，参数使用formdata传参
情景1：get请求，params传参
url与参数部分代码：
this.axios.get('/api/downloadconfig', {
params:{oid:oid},
responsetype:'blob',
})blob具体下载实现代码
if(res.status === 200){
const content = res.data;
const blob = new blob([content]);
if('download' in document.createelement('a')){
//非ie下载
const a = document.createelement('a');
a.download = filename;
a.style.display = 'none';
a.href = window.url.createobjecturl(blob);
document.body.appendchild(a);
a.click();
window.url.revokeobjecturl(a.href);
document.body.removechild(a);
}else{
//ie10+下载
if(typeof window.navigator.mssaveblob !== 'undefined'){
window.navigator.mssaveblob(blob, _this.selected);
}else{
let url = window.url || window.webkiturl;
let downloadurl = url.createobjecturl(blob);
window.location = downloadurl;
}
}情景2：post请求，formdata传参
url与参数部分代码：
this.axios.post('/api/downloadconfig', form, {responsetype:'blob'})blob具体下载实现代码与上文get请求一致
vue axios实现下载文件及responsetype:blob注意事项
需要使用axios和js-file-download组件
npm install js-file-download --save npm install axios --save
import filedownload from 'filedownload'; // 引入filedownload
import axios from 'axios'; // 引入axios
axios({
method: 'get',
url: 'xxxxxxx',
responsetype: 'blob'
}).then(res => {
if(res.status == 200){
// res.headers['content-disposition'].substring(20)表示从响应头中获取文件名
filedownload(res.data,res.headers['content-disposition'].substring(20));
}else { // 下载文件失败，解析json格式信息
let that = this;
var filereader = new filereader();
filereader.readastext(res.data); // 按字节读取文件内容，结果为文件的二进制串
filereader.onload = ()=>{
that.$notify.error(filereader.result);
}
}
})注意事项：
responsetype:blob表示服务器返回的响应类型是二进制流，一般用于文件、视频下载等场景。
正常情况下后端返回二进制数据，当后端服务器出错时，往往会以json形式返回错误信息，例如{"code":500,"msg":"未知异常"}。
因为设置了blob类型，axios会强制把数据转为blob，导致json格式的响应没办法正常解析，需要使用filereader对象来处理，filereader是一种异步读取文件机制。
filereader提供了如下方法，大家根据需要自行选择。
readasarraybuffer(file)：按字节读取文件内容，结果用arraybuffer对象表示readasbinarystring(file)：按字节读取文件内容，结果为文件的二进制串readasdataurl(file)：读取文件内容，结果用data:url的字符串形式表示readastext(file,encoding)：按字符读取文件内容，结果用字符串形式表示
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论