vue+iview 經過a標籤實現文件下載

vue+iview 經過a標籤實現文件下載

方法一：
注意: 若是下載的文件放在本地目錄下，必定要將模板文件放到 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"
        }
    } 
}

方法二：
有時候咱們須要將文件下載下來而不是直接打開，使用方法一能夠實現部分文件下載，可是圖片或者PDF等相似文件就會直接打開，這是瀏覽器默認的行爲，有沒有方法阻止這種默認的行爲，點擊a標籤的連接執行的都是下載行爲呢？另外Chrome對跨域下載文件的支持並不友好，這裏提供了一個有效的解決方案：

2.1 使用a標籤綁定事件

<a @click.prevent="downloadItem(downUrl)" :href="downUrl" >下載{{ downTplNm }}模板</a>

2.2 定義下載方法
避免CORS問題的一種方法是經過XHR請求獲取文件並將文件做爲blob，這裏使用了axios，可是你可以使用你想要的任何lib

import Axios from 'axios'

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