淺談vue中文件下載的幾種方式及方法封裝
更新時間:2023年01月13日 09:58:13 作者:嘖嘖靜
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一、通過對后端發(fā)送post請求,使用blob下載文件
/** ?* @param {blob} res - 導出數據 ?* @param {string} fileName - 文件導出名稱 ?* @param {string} format - 導出文件格式 ?* @return {*} ?*/ function downBlob(res, fileName = "導出報表", format = "xlsx") { ? // 調用接口獲取到文件 ? const blob = new Blob([res], { ? ? type: "application/vnd.ms-excel" ? }); ? // 下載文件名 ? fileName = fileName + parseInt(Math.random() * 9999) + "." + format; ? const linkNode = document.createElement("a"); ? linkNode.download = fileName; // a標簽的download屬性規(guī)定下載文件的名稱 ? linkNode.style.display = "none"; ? linkNode.href = URL.createObjectURL(blob); // 生成一個Blob URL ? document.body.appendChild(linkNode); ? linkNode.click(); // 模擬在按鈕上的一次鼠標單擊 ? URL.revokeObjectURL(linkNode.href); // 釋放URL 對象 ? document.body.removeChild(linkNode); }
二、通過對后端發(fā)送post請求,使用url下載文件
/** ?* @param {string} fileName - 文件導出名稱 ?* @param {string} url - 文件url地址 ?* @return {*} ?*/ function download(fileName, url) { ? fileName = fileName || "導出報表"; ? let arr = url.split("."); ? fileName += parseInt(Math.random() * 9999) + "." + arr[arr.length - 1]; ? const linkNode = document.createElement("a"); ? linkNode.download = fileName; // a標簽的download屬性規(guī)定下載文件的名稱 ? linkNode.style.display = "none"; ? if (process.env.VUE_APP_TEM_PATH) { ? ? // 生成一個Blob URL ? ? linkNode.href = process.env.VUE_APP_TEM_PATH + url; ? } else { ? ? // 生成一個Blob URL ? ? linkNode.href = url; ? } ? document.body.appendChild(linkNode); ? linkNode.click(); // 模擬在按鈕上的一次鼠標單擊 ? URL.revokeObjectURL(linkNode.href); // 釋放URL 對象 ? document.body.removeChild(linkNode); }
進行main.js中全局引用
// 通過url下載文件 import { download } from "@/utils/auth"; Vue.prototype.$download = download; // 通過blob下載文件 import { downBlob } from "@/utils/auth"; Vue.prototype.$downBlob = downBlob;
實際使用方式
// res.data.url 通過url下載文件 this.$download("銷售統(tǒng)計", res.data.url); // res 通過blob下載文件 this.$downBlob(res, "商城訂單與ERP訂單對照明細");
到此這篇關于淺談vue中文件下載的幾種方式及方法封裝的文章就介紹到這了,更多相關vue 文件下載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
VUE跨域問題Access to XMLHttpRequest at
今天發(fā)現一個錯誤,VUE發(fā)送請求的時候不能請求到正確數據,VUE跨域問題Access to XMLHttpRequest at,本文就詳細的來介紹一下解決方法,感興趣的可以了解一下2022-05-05vue3?+?async-validator實現表單驗證的示例代碼
表單驗證可以有效的過濾不合格的數據,減少服務器的開銷,并提升用戶的使用體驗,今天我們使用?vue3?來做一個表單驗證的例子,需要的朋友跟隨小編一起學習下吧2022-06-06