当前位置: 首页 > 工具软件 > iView-Aliapp > 使用案例 >

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

党博超
2023-12-01

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

方法一:

注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件

路径: 项目更目录--》public--》tpls--》下载模板.xls

1.1 直接使用a标签 + download属性

下载{{ downTplNm }}模板

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标签绑定事件

下载{{ downTplNm }}模板

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)

})

})

}

}

 类似资料: