Vue+iView經過a標籤導出文件

Vue+iView經過a標籤綁定事件導出文件

 

使用a標籤綁定事件:
<a @click.prevent="downloadItem(downUrl)" :href="downUrl" >下載模板</a>

 

定義下載方法會使用到axios:
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)
      })
    })
  }
}

Vue+iView經過a標籤屬性導出文件

a標籤綁定屬性
<a href="url" download="filename">下載</a>

　url是你的路徑，若是不寫或者寫成# 會下載當前頁面的HTML代碼

　filename是下載以後文件的名字。因此不寫也能夠，不寫會按照路徑裏的那個文件名來。