在vue中通過a下載exe文件的方法

這篇“在vue中通過a下載exe文件的方法”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“在vue中通過a下載exe文件的方法”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

　　在vue中通過a下載exe文件方法一：

　　注意:如果下載的文件放在本地目錄下，一定要將模板文件放到public目錄下，否則由于權(quán)限問題找不到文件

　　路徑：項(xiàng)目更目錄--》public--》tpls--》下載模板.xls

　　1.1直接使用a標(biāo)簽+download屬性

<a:href="downUrl"target="_blank":download="downNm">下載{{downTplNm}}模板</a>
　　1.2定義文件下載地址和文件名
　　methods:{
　　type2Obj:function(type){
　　switch(type){
　　case:'wl':
　　this.downTplNm="白名單",
　　this.downUrl="../tpls/白名單模板.xls",
　　this.downNm="白名單模板.xls"
　　}
　　}
　　}

　　在vue中通過a下載exe文件方法二：

　　有時候我們需要將文件下載下來而不是直接打開，使用方法一可以實(shí)現(xiàn)部分文件下載，但是圖片或者PDF等類似文件就會直接打開，這是瀏覽器默認(rèn)的行為，有沒有方法阻止這種默認(rèn)的行為，點(diǎn)擊a標(biāo)簽的鏈接執(zhí)行的都是下載行為呢？另外Chrome對跨域下載文件的支持并不友好，這里提供了一個有效的解決方案：

　　2.1使用a標(biāo)簽綁定事件

　　下載{{downTplNm}}模板</a>

　　2.2定義下載方法

　　避免CORS問題的一種方法是通過XHR請求獲取文件并將文件作為blob，這里使用了axios，但是你可使用你想要的任何lib

　　importAxiosfrom'axios'
　　methods:{
　　downloadItem(url){
　　Axios.get(url,{responseType:'blob'})
　　.then(({data})=>{
　　//為了簡單起見這里blob的mime類型固定寫死了
　　letblob=newBlob([data],{type:'application/vnd.ms-excel'})
　　letlink=document.createElement('a')
　　link.href=window.URL.createObjectURL(blob)
　　link.download=url.split('/').pop()
　　link.click()
　　.catch(error=>{
　　console.error(error)
　　})
　　})
　　}
　　}

以上是“在vue中通過a下載exe文件的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！