vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载
方法一:
注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 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)
})
})
}
}
vue+iview 通过a标签实现文件下载的更多相关文章
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- thinkphp5+vue+iview商城 公众号+小程序更新版本
thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...
- vue & iview
vue & iview ui components https://codepen.io/webgeeker/pen/EJmQxQ https://www.iviewui.com/docs/g ...
- vue之给a标签赋值
<li v-for="(bp,index) in bpLists"> <a class="bidPublicityTitle" :href=& ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- 【vue iview】项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了。
[vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.
- vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
随机推荐
- Tomcat redis session manager connect redis show: ERR Client sent AUTH, but no password is set
解决问题redis问题:ERR Client sent AUTH, but no password is set - 东篱煮酒 - 博客园https://www.cnblogs.com/niepeis ...
- ubuntu下搭建nfs服务
1. 安装nfs服务端 $ sudo apt install nfs-kernel-server -y 2. 创建目录 $ sudo mkdir -p /mnt/sharefolder 3. 使任何客 ...
- Closing the Sim-to-Real Loop: Adapting Simulation Randomization with Real World Experience
Closing the Sim-to-Real Loop: Adapting Simulation Randomization with Real World Experience 模拟到实际循环闭环 ...
- Chrome V75V76新版无法存为mhtml格式解决办法
升级到75.76版本后谷歌浏览器Chrome V75.0.3770.142 V76.0.3809.87新版,发现无法另存为/保存网页为MHTML了.原来chrome搞了个"Chrome Fl ...
- C++接口的概念
满足下面条件: 1.类中没有定义任何的成员变量 2.所有的成员函数都是公有的 3.所有的成员函数都是纯虚函数 4.接口是一种特殊的抽象类
- 【436】Solution for LeetCode Problems
Coding everyday. ^_^ 1. Two Sum 重点知识:指针可以存储数值,通过 malloc 新建数组 int* returnSize:Size of the return arra ...
- 通过pathinfo返回扩展名
strtolower(pathinfo(abs.php,PATHINFO_EXTENSION)); 小写 通过pathinfo返回扩展名 pathinfo() 函数以数组的形式返回文件路径的信息. p ...
- 石子合并 区间DP模板题
题目链接:https://vjudge.net/problem/51Nod-1021 题意 N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石 ...
- MySQL 8中使用全文检索示例
首先建议张册测试用的表test,并使用fulltext说明将title和body两列的数据加入全文检索的索引列中: drop table if exists test; create table te ...
- 【Leetcode_easy】1029. Two City Scheduling
problem 1029. Two City Scheduling 参考 1. Leetcode_easy_1029. Two City Scheduling; 完