淺談vue中文件下載的幾種方式及方法封裝
一、通過(guò)對(duì)后端發(fā)送post請(qǐng)求,使用blob下載文件
/** ?* @param {blob} res - 導(dǎo)出數(shù)據(jù) ?* @param {string} fileName - 文件導(dǎo)出名稱 ?* @param {string} format - 導(dǎo)出文件格式 ?* @return {*} ?*/ function downBlob(res, fileName = "導(dǎo)出報(bào)表", format = "xlsx") { ? // 調(diào)用接口獲取到文件 ? 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標(biāo)簽的download屬性規(guī)定下載文件的名稱 ? linkNode.style.display = "none"; ? linkNode.href = URL.createObjectURL(blob); // 生成一個(gè)Blob URL ? document.body.appendChild(linkNode); ? linkNode.click(); // 模擬在按鈕上的一次鼠標(biāo)單擊 ? URL.revokeObjectURL(linkNode.href); // 釋放URL 對(duì)象 ? document.body.removeChild(linkNode); }
二、通過(guò)對(duì)后端發(fā)送post請(qǐng)求,使用url下載文件
/** ?* @param {string} fileName - 文件導(dǎo)出名稱 ?* @param {string} url - 文件url地址 ?* @return {*} ?*/ function download(fileName, url) { ? fileName = fileName || "導(dǎo)出報(bào)表"; ? let arr = url.split("."); ? fileName += parseInt(Math.random() * 9999) + "." + arr[arr.length - 1]; ? const linkNode = document.createElement("a"); ? linkNode.download = fileName; // a標(biāo)簽的download屬性規(guī)定下載文件的名稱 ? linkNode.style.display = "none"; ? if (process.env.VUE_APP_TEM_PATH) { ? ? // 生成一個(gè)Blob URL ? ? linkNode.href = process.env.VUE_APP_TEM_PATH + url; ? } else { ? ? // 生成一個(gè)Blob URL ? ? linkNode.href = url; ? } ? document.body.appendChild(linkNode); ? linkNode.click(); // 模擬在按鈕上的一次鼠標(biāo)單擊 ? URL.revokeObjectURL(linkNode.href); // 釋放URL 對(duì)象 ? document.body.removeChild(linkNode); }
進(jìn)行main.js中全局引用
// 通過(guò)url下載文件 import { download } from "@/utils/auth"; Vue.prototype.$download = download; // 通過(guò)blob下載文件 import { downBlob } from "@/utils/auth"; Vue.prototype.$downBlob = downBlob;
實(shí)際使用方式
// res.data.url 通過(guò)url下載文件 this.$download("銷(xiāo)售統(tǒng)計(jì)", res.data.url); // res 通過(guò)blob下載文件 this.$downBlob(res, "商城訂單與ERP訂單對(duì)照明細(xì)");
到此這篇關(guān)于淺談vue中文件下載的幾種方式及方法封裝的文章就介紹到這了,更多相關(guān)vue 文件下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue elementUI下拉框值無(wú)法選中問(wèn)題及解決方案
大家在寫(xiě)系統(tǒng)的時(shí)候,會(huì)有這樣的需求:點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會(huì)有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無(wú)法選中問(wèn)題,感興趣的朋友一起看看吧2024-03-03關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案
這篇文章主要介紹了關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤,VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù),VUE跨域問(wèn)題Access to XMLHttpRequest at,本文就詳細(xì)的來(lái)介紹一下解決方法,感興趣的可以了解一下2022-05-05Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來(lái)定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07Vue-cli3.X使用px2 rem遇到的問(wèn)題及解決方法
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue3?+?async-validator實(shí)現(xiàn)表單驗(yàn)證的示例代碼
表單驗(yàn)證可以有效的過(guò)濾不合格的數(shù)據(jù),減少服務(wù)器的開(kāi)銷(xiāo),并提升用戶的使用體驗(yàn),今天我們使用?vue3?來(lái)做一個(gè)表單驗(yàn)證的例子,需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項(xiàng)目打包為桌面應(yīng)用exe文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05