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

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

Vue的優點

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

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

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

　　路徑：項目更目錄--》public--》tpls--》下載模板.xls

　　1.1直接使用a標簽+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文件方法二：

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

　　2.1使用a標簽綁定事件

　　下載{{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文件的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！