快捷導(dǎo)航

Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法

更新時(shí)間：2025年02月26日 08:34:24 作者：接口寫好了嗎?

這篇文章主要介紹了Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法的相關(guān)資料,需要的朋友可以參考下

第一步，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)書下載
download() {
   // 通過a標(biāo)簽來實(shí)現(xiàn)下載
   var a = document.createElement("a") //創(chuàng)建一個(gè)<a></a>標(biāo)簽
    a.href = "/static/簽約授權(quán)書.docx" //給a標(biāo)簽的href屬性值加上地址，注意，這里是絕對(duì)路徑，不用    加 點(diǎn).
    a.download = "簽約授權(quán)書.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)，看完整路徑是否存在問題：

加上console.log("href: " + link.href)，復(fù)制該地址直接在瀏覽器中訪問（項(xiàng)目有沒有配置上下文，如有，看路徑中是否會(huì)帶上了上下文
）

若路徑中存在中文，將中文換成英文試試。若英文路徑可以正常下載，則有可能是中文亂碼的問題，則相應(yīng)查找解決中文亂碼的方法（我這邊使用的最簡(jiǎn)單的方式，將文件名改為了英文，項(xiàng)目中沒有要求一定要用中文名，成功下載了。）

總結(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: