vue下載blob文檔流實(shí)現(xiàn)過(guò)程
更新時(shí)間：2025年12月18日 08:52:20 作者：是小芬達(dá)啊
文章介紹了兩種在Vue中下載Blob文檔流的常見(jiàn)方法：一種是通過(guò)創(chuàng)建a標(biāo)簽并觸發(fā)點(diǎn)擊事件來(lái)下載,另一種是使用`file-saver`庫(kù)和封裝的`download.js`公用方法來(lái)處理文檔流的下載
vue下載blob文檔流
一般文件常見(jiàn)的下載方式
直接a鏈接可以下載，還有一種就是請(qǐng)求后端的文檔流下載
- 前一種比較簡(jiǎn)單就不多講了，大概思路是：請(qǐng)求后端接口獲取文件下的地址，然后在文檔中創(chuàng)建一個(gè)a標(biāo)簽，js點(diǎn)擊a標(biāo)簽，然后銷毀這個(gè)a標(biāo)簽；
- 后一種就是通過(guò)文檔流請(qǐng)求后端：
首先，下載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
// 驗(yàn)證是否為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',//這邊很關(guān)鍵，一定要寫(xiě)
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);
}
}
最后在頁(yè)面中應(yīng)用
import download from "@/utils/download.js";
//下載詳情
methods: {
handleView(record) {
download.name(record.reportFilePath);
},
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
我們都知道Electron項(xiàng)目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實(shí)就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程,需要的朋友可以參考下2023-03-03
vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue如何實(shí)現(xiàn)關(guān)閉對(duì)話框后刷新列表
這篇文章主要介紹了vue如何實(shí)現(xiàn)關(guān)閉對(duì)話框后刷新列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue3實(shí)現(xiàn)印章徽章組件的示例代碼
這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡(jiǎn)單的印章徽章控件，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
下面小編就為大家介紹一下vue 自定義全局方法,在組件里面的使用。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-06-06
基于Vue3+TypeScript實(shí)現(xiàn)抖音式卡片滑動(dòng)交互功能
本文介紹如何用 Vue 3 + TypeScript 實(shí)現(xiàn)類似抖音的卡片滑動(dòng)交互,應(yīng)用于單詞記憶場(chǎng)景,完整方案包含手勢(shì)識(shí)別、堆疊動(dòng)畫(huà)、實(shí)時(shí)反饋和狀態(tài)管理,需要的朋友可以參考下2026-06-06
實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3純前端實(shí)現(xiàn)驗(yàn)證碼代碼示例
這篇文章主要介紹了驗(yàn)證碼的用途和分類,展示了如何創(chuàng)建一個(gè)簡(jiǎn)單的純前端字符驗(yàn)證碼組件,并通過(guò)Canvas增加干擾線和干擾點(diǎn)的效果,通過(guò)Vue組件化開(kāi)發(fā),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08