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是下載之后文件的名字。所以不寫也可以，不寫會按照路徑里的那個文件名來。