快捷導(dǎo)航

Vue如何下載本地靜態(tài)資源static文件夾

更新時(shí)間：2022年09月05日 15:01:42 作者：碼農(nóng)鍵盤上的夢(mèng)

這篇文章主要介紹了Vue如何下載本地靜態(tài)資源static文件夾，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

下載本地靜態(tài)資源static文件夾

 <a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="下載"></a>

項(xiàng)目需要下載本地的docx文檔，文檔是放在本地的沒(méi)有在服務(wù)器，所以需要下載本地靜態(tài)資源文件，開(kāi)始把文件放在了這里src目錄下的assets資源文件下

下載報(bào)錯(cuò) 找不到文件路徑查找原因是因?yàn)轫?xiàng)目用的是vue-cli3, 在打包的時(shí)候并不知道會(huì)把a(bǔ)ssets

下的文件打包在哪里，但是在build的時(shí)候發(fā)現(xiàn)在根目錄下的文件是打包在當(dāng)前路徑下的

所以我們要把需要下載的靜態(tài)資源放在public文件夾下的static文件夾下就可以了

你可能在輸入路徑的時(shí)候會(huì)提示你是src,而不直接是static,但是你還是要直接輸入static這個(gè)路徑

<a href="/static/serviceAgreement.docx" rel="external nofollow"  rel="external nofollow"  download="服務(wù)協(xié)議"></a>

需要注意的是：cli2需要把要下載的文件放在static下面；cli4需要將文件放在public里面才不會(huì)被打包。

注意：href 指向項(xiàng)目中pdf文件的路徑（不要出現(xiàn)中文），download 就是重命名的文件名，不設(shè)置的話就是默認(rèn)文件名

發(fā)現(xiàn)vue版本是 3.0+ 所有把要下載的文件直接放到public文件夾中（最好英文名字）

未發(fā)現(xiàn)文件

接手了一個(gè)別人做的官網(wǎng)項(xiàng)目，里面添加一些功能，國(guó)際化（國(guó)際化）；接著有一個(gè)下載的功能，一般都是后端甩一個(gè)鏈接你放上面就好，但是這個(gè)小功能再去找一個(gè)后端搞，太夸張了吧，那我們就自己搞！

方法當(dāng)然是非常多的，但是我試了幾種，總是會(huì)報(bào)一個(gè)錯(cuò)誤；“未發(fā)現(xiàn)文件”，還有的時(shí)候就是：房子同一個(gè)地址下面；非壓縮包的文件可以正常下載，但是壓縮包就不能下載；

上代碼

最簡(jiǎn)單的就是利用a標(biāo)簽

<el-button round
><a href="/xlsx/test.xlsx" rel="external nofollow"  download="大賽報(bào)名表.xlsx"
? >報(bào)名參賽</a
></el-button>

會(huì)有人疑問(wèn)路徑是不是不對(duì)，

一般訪問(wèn)static里面的文件路徑是："…/…/static/zip/test.xlsx"

我開(kāi)始也是這樣寫的，一直報(bào)錯(cuò)”未找到文件“，

后來(lái)看了cli版本，發(fā)現(xiàn)是cli4有一些變化，改成代碼中的路徑就可以了；

還有一個(gè)問(wèn)題就是相同路徑，普通文件可以下載，但是壓縮包無(wú)法下載，（我試驗(yàn)過(guò)把壓縮包和普通文件放到同一個(gè)路路徑下依然有問(wèn)題）；

這個(gè)時(shí)候我們就不要在html里面去操作他了；給他一個(gè)點(diǎn)擊事件

上代碼

html

<el-button @click="download">
題目下載
</el-button>

script

methods: {
? ? download() {
? ? ? window.location.href = "/zip/subject.zip";
? ? },
? },

兩個(gè)文件的路徑

文件路徑

做一下記錄，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: