vue使用a标签下载文件_vue+iview 通过a标签实现文件下载
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)
})
})
}
}
vue使用a标签下载文件_vue+iview 通过a标签实现文件下载相关推荐
- a标签下载文件,浏览器变打开预览的解决方案
前景: 处理接口返回的文件链接需要下载,例如http://xxxxx/xxx.jpeg,使用a标签进行下载时(加了download),浏览器对这些类型的文件可以解析,还会打开这个文件在浏览器上进行预览 ...
- a标签下载文件,js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
- VUE中IE浏览器下载文件的解决方案
IE浏览器无法通过a标签下载文件 1. 问题 2.解决方案 1. 问题 浏览器的兼容性问题一直是个令人头痛的问题,开发的小伙伴应该都比较喜欢用chrome浏览器,兼容性比较强大,而就有些问题发生在其他 ...
- 使用a标签下载文件,浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案 背景 一.HTML中的a标签实现点击下载 二.即使使用a标签的download属性,chrome浏览器还是会打开 三.解决方案 解决方案一:使用ajax请 ...
- js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
- EasyExcel+elementUI+vue 上传、下载文件实例
本文为 easyexcel使用具体实例,包含前后端代码,前端使用 vue + elementUI+axios,后端使用 spring boot. 1. 上传文件 1.1. 后端 1.1.1. 添加依赖 ...
- Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法 一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
- vue.js接收并下载文件流(blob对象)
在vue框架中,与传统的根据路径下载文件(document.getElementById("").src='')方式不同,有时候,我们会需要将上传的文件在后台直接进行处理再回传到前 ...
- a标签下载文件header中带上用于鉴权的token
加了统一鉴权以后 如果把下载接口也拦截了 且前端使用的是a标签 可以用如下方法解决 替换调请求url和请求方式 , 方式一和方式二任意注释一个就可以运行了 方式1用的是原生的XmlHttpReque ...
- A 标签下载文件 Header 中带上用于鉴权的 Token
加了统一鉴权以后,可能会把 A 标签下载的接口也给拦截了,但是 A 标签是无法带上 Token 的,本文将介绍如何让 A 标签支持像 Ajax 一样发送请求. 加了统一鉴权以后 如果把下载接口也拦截了 ...
最新文章
- jQuery获取浏览器URL链接的值
- [转载]配置unp.h头文件环境
- python用random产生验证码,以及random的一些其他用法
- How is SCM product maintenance tcode redirecting access to MARA
- 支付宝打年兽神器 v1.4.5
- ajax 购物车 c#,C#AJAX实例
- 写入文件python并用序号_Python和excel表合成示例:向表中添加序列号,向表的现有内容添加索引,与,Excel,表格,综合,实例,给,增加,序号,对,已有...
- 第 8 章 建造者模式
- PAT (Basic Level) Practice1019 数字黑洞
- JS弹出框插件zDialog再次封装
- Ubuntu查看crontab运行日志
- 查看centos操作系统、java_jdk、hadoop位数
- 串口通信基本接线方法
- LEADTOOLS 文档 SDK,创建以下任何对象
- SpringBoot-短信发送
- 如何下载邯郸市卫星地图高清版大图
- Windows11 下屏幕亮度自动调整的问题解决
- 键盘输入正六边形边长,输出对应的正六边形
- 69A.Young Physicist
- git如何撤销某次提交记录