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

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

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

第一步，public文件夾下新建static文件夾存放靜態(tài)資源

我存放了一個 .docx文件，當然，你可以存放pdf/word 等文件都可以。

第二步，模擬a標簽下載

//html部分

<el-button type="primary" plain @click="download">本地下載</el-button>

//js部分

// 授權書下載
download() {
   // 通過a標簽來實現(xiàn)下載
   var a = document.createElement("a") //創(chuàng)建一個<a></a>標簽
    a.href = "/static/簽約授權書.docx" //給a標簽的href屬性值加上地址，注意，這里是絕對路徑，不用    加 點.
    a.download = "簽約授權書.docx" //設置下載文件文件名，這里加上.docx指定文件類型，pdf文件就指定.pdf即可
    a.style.display = "none" //隱藏a標簽
    document.body.append("a") //將a標簽追加到document.body中
    a.click() //模擬點擊a標簽，會觸發(fā)a標簽的href的讀取，瀏覽器就會自動下載了
    a.remove() // 刪除a標簽（一次性的）
}

附：前端Vue實現(xiàn)文件下載提示失敗-未發(fā)現(xiàn)文件的解決思路

前端vue中動態(tài)創(chuàng)建a標簽下載文件

<div name="downloadfile" onclick="downloadClick()">下載模板</div>
//下載模板
downloadClick:function(event){
    var link = document.createElement('a');
    link.setAttribute("download", "");
    link.href = "./static/參會者模板.xls";
    link.click();
}

鏡像打包部署后，點擊下載模板，給出“失敗-未發(fā)現(xiàn)文件”的提示。