vue下載blob文檔流實現(xiàn)過程
更新時間:2025年12月18日 08:52:20 作者:是小芬達啊
文章介紹了兩種在Vue中下載Blob文檔流的常見方法:一種是通過創(chuàng)建a標簽并觸發(fā)點擊事件來下載,另一種是使用`file-saver`庫和封裝的`download.js`公用方法來處理文檔流的下載
vue下載blob文檔流
一般文件常見的下載方式
直接a鏈接可以下載,還有一種就是請求后端的文檔流下載
- 前一種比較簡單就不多講了,大概思路是:請求后端接口獲取文件下的地址,然后在文檔中創(chuàng)建一個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);
},
}
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-06-06
基于Vue3+TypeScript實現(xiàn)抖音式卡片滑動交互功能
本文介紹如何用 Vue 3 + TypeScript 實現(xiàn)類似抖音的卡片滑動交互,應用于單詞記憶場景,完整方案包含手勢識別、堆疊動畫、實時反饋和狀態(tài)管理,需要的朋友可以參考下2026-06-06
實現(xiàn)vuex與組件data之間的數據同步更新方式
今天小編就為大家分享一篇實現(xiàn)vuex與組件data之間的數據同步更新方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11

