vue中axios利用blob实现文件浏览器下载方式
作者：myl0808
这篇文章主要介绍了vue中axios利用blob实现文件浏览器下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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)：按字符读取文件内容，结果用字符串形式表示
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。