vue下载blob文档流实现过程
作者：是小芬达啊
文章介绍了两种在Vue中下载Blob文档流的常见方法：一种是通过创建a标签并触发点击事件来下载,另一种是使用`file-saver`库和封装的`download.js`公用方法来处理文档流的下载
vue下载blob文档流
一般文件常见的下载方式
直接a链接可以下载，还有一种就是请求后端的文档流下载
- 前一种比较简单就不多讲了，大概思路是：请求后端接口获取文件下的地址，然后在文档中创建一个a标签，js点击a标签，然后销毁这个a标签；
- 后一种就是通过文档流请求后端：
首先，下载file-saver
cnpm i file-saver --save
封装download.js公用方法
//utils/download.js
import Vue from 'vue'
import axios from 'axios'
import { saveAs } from 'file-saver'
import { message } from 'ant-design-vue'
const baseURL = process.env.VUE_APP_BASEURL
// 验证是否为blob格式
async function blobValidate(data) {
try {
const text = await data.text();
JSON.parse(text);
return false;
} catch (error) {
return true;
}
}
export default {
name(name, isDelete = false) {
var url = baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDelete
axios({
method: 'get',
url: url,
responseType: 'blob',//这边很关键，一定要写
headers: { 'Authorization': 'Bearer ' + Vue.ls.get('token') }
}).then(async(res) => {
const isLogin = await blobValidate(res.data);
if (isLogin) {
console.log(res);
const blob = new Blob([res.data])
this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
} else {
this.printErrMsg(res.data);
}
})
},
saveAs(text, name, opts) {
saveAs(text, name, opts);
}
}
最后在页面中应用
import download from "@/utils/download.js";
//下载详情
methods: {
handleView(record) {
download.name(record.reportFilePath);
},
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。