a標(biāo)簽的下載功能：
1：bobl ----二進(jìn)制流文件
Blob對(duì)象標(biāo)識(shí)一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。Blob表示的不一定是JavaScript原生格式的數(shù)據(jù)
2：responseType
responseType它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，由于后臺(tái)返回來的是二進(jìn)制數(shù)據(jù)，所以要把它設(shè)為‘blob’
通過設(shè)置responseType為blob，可以直接拿到二進(jìn)制文件轉(zhuǎn)化為Blob，兩種使用 Blob 實(shí)現(xiàn)文件下載的方式
3：window.URL.createObjectURL
在瀏覽器端，實(shí)現(xiàn)直接下載文件，就是使用 a標(biāo)簽?來只想文件的下載地址。window.location.href的本質(zhì)也是這樣，因此在拿到二進(jìn)制文件對(duì)應(yīng)的Blob對(duì)象后，需要為這個(gè)Blob對(duì)象創(chuàng)建一個(gè)指向它的下載地址的URL
vuecli2里面，下載靜態(tài)文件方法：
1. a標(biāo)簽用 :href="../static/1111.xls" download=“文件名稱" 下載;
2. location.href=”…/static/1111.xls`"
3. window.open等等；
需要注意的是：cli2里面需要把要下載的文件放在static下面；
但是現(xiàn)在cli已經(jīng)出到4了，需要將文件放在public里面才不會(huì)被打包，
但是同樣的方法我們會(huì)發(fā)現(xiàn)卻找不到文件,效果如圖：
文件路徑：
頁(yè)面（下載本地文件，不用點(diǎn)擊事件，a標(biāo)簽就可以）
?結(jié)果
?修改后
?結(jié)果1：
?
結(jié)果2：如果打包后下載文件打開為空
?原因：基礎(chǔ)路徑?jīng)]有添加，所以在打包后，會(huì)在發(fā)布在測(cè)試/預(yù)發(fā)布/生產(chǎn)的時(shí)候會(huì)加上相對(duì)應(yīng)的基礎(chǔ)路徑，而上面那個(gè)什么都沒有加，所以自測(cè)的時(shí)候可以但是會(huì)在打包發(fā)布后會(huì)出錯(cuò)
解決方法：加上基礎(chǔ)路徑
?環(huán)境配置文件--? .env.development
?配置文件--??vue.config.js
文章來源：http://www.zghlxwxcb.cn/news/detail-787074.html
?代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-787074.html
<span
class="clickStyle"
@click="downloadFile(downLoadUrl,'合同付款建議書模板下載')">
合同付款建議書模板下載
</span>
data(){
return{
downLoadUrl:process.env.BASE_URL+"static/files/付款建議書標(biāo)準(zhǔn).xlsx",
}
}
// 下載
downloadFile (url,fileName) {
console.log(url);
const x = new XMLHttpRequest();
x.open('GET', url, true);
x.responseType = 'blob';
x.onload = function (e) {
const url = window.URL.createObjectURL(x.response);
const elink = document.createElement('a');
elink.href = url;
elink.target = '_self'; // 當(dāng)前也 target打開新頁(yè)面
elink.setAttribute('download', fileName);
elink.style.display = 'none';
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
};
x.send();
},到了這里，關(guān)于vue-cli4前端實(shí)現(xiàn)下載本地Excel模板，以及下載靜態(tài)文件的坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
