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是下载之后文件的名字。所以不写也可以，不写会按照路径里的那个文件名来。