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)
      })
    })
  }
}