Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法
第一步，public文件夾下新建static文件夾存放靜態(tài)資源
我存放了一個(gè) .docx文件，當(dāng)然，你可以存放pdf/word 等文件都可以。
第二步，模擬a標(biāo)簽下載
//html部分
<el-button type="primary" plain @click="download">本地下載</el-button>
//js部分
// 授權(quán)書(shū)下載
download() {
// 通過(guò)a標(biāo)簽來(lái)實(shí)現(xiàn)下載
var a = document.createElement("a") //創(chuàng)建一個(gè)<a></a>標(biāo)簽
a.href = "/static/簽約授權(quán)書(shū).docx" //給a標(biāo)簽的href屬性值加上地址，注意，這里是絕對(duì)路徑，不用 加 點(diǎn).
a.download = "簽約授權(quán)書(shū).docx" //設(shè)置下載文件文件名，這里加上.docx指定文件類型，pdf文件就指定.pdf即可
a.style.display = "none" //隱藏a標(biāo)簽
document.body.append("a") //將a標(biāo)簽追加到document.body中
a.click() //模擬點(diǎn)擊a標(biāo)簽，會(huì)觸發(fā)a標(biāo)簽的href的讀取，瀏覽器就會(huì)自動(dòng)下載了
a.remove() // 刪除a標(biāo)簽（一次性的）
}附：前端Vue實(shí)現(xiàn)文件下載提示 失敗-未發(fā)現(xiàn)文件的解決思路
前端vue中動(dòng)態(tài)創(chuàng)建a標(biāo)簽下載文件
<div name="downloadfile" onclick="downloadClick()">下載模板</div>
//下載模板
downloadClick:function(event){
var link = document.createElement('a');
link.setAttribute("download", "");
link.href = "./static/參會(huì)者模板.xls";
link.click();
}
鏡像打包部署后，點(diǎn)擊下載模板，給出“失敗-未發(fā)現(xiàn)文件”的提示。
解決思路：
在鏡像包中查看該文件是否存在于該路徑下
將下載地址打印在瀏覽器控制臺(tái)，看完整路徑是否存在問(wèn)題：
加上console.log("href: " + link.href)，復(fù)制該地址直接在瀏覽器中訪問(wèn)（項(xiàng)目有沒(méi)有配置上下文，如有，看路徑中是否會(huì)帶上了上下文
）
若路徑中存在中文，將中文換成英文試試。若英文路徑可以正常下載，則有可能是中文亂碼的問(wèn)題，則相應(yīng)查找解決中文亂碼的方法（我這邊使用的最簡(jiǎn)單的方式，將文件名改為了英文，項(xiàng)目中沒(méi)有要求一定要用中文名，成功下載了。）
總結(jié)
到此這篇關(guān)于Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)的文章就介紹到這了,更多相關(guān)Vue用a標(biāo)簽下載靜態(tài)資源文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問(wèn)題
這篇文章主要介紹了Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本文重點(diǎn)給大家介紹Vue拖拽組件開(kāi)發(fā)實(shí)例，拖拽的原理是手指在移動(dòng)的過(guò)程中，實(shí)時(shí)改變?cè)氐奈恢眉磘op和left值，使元素隨著手指的移動(dòng)而移動(dòng)。對(duì)實(shí)例代碼感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對(duì)數(shù)組監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
前端本地存儲(chǔ)方案localForage在vue3中使用方法
localForage是前端本地存儲(chǔ)的庫(kù),支持多種存儲(chǔ)后端,并提供了一致的API來(lái)存儲(chǔ)和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
Vue el-upload單圖片上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue el-upload單圖片上傳功能實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue-cli3多頁(yè)面配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue.js實(shí)現(xiàn)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能)
這篇文章主要介紹了vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了3種vue組件的書(shū)寫(xiě)形式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用,針對(duì)不同的使用場(chǎng)景,如何選擇行之有效的通信方式？這是我們所要探討的主題,本文總結(jié)了 vue 組件間通信的幾種方式,需要的朋友可以參考下2025-03-03