vue+iview 通过a标签实现文件下载

Dear 丶 2021-11-09 09:54 371阅读 0赞

方法一：  
注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 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)
          })
        })
      }
    }

转载于:https://www.cnblogs.com/codebook/p/11159604.html