通过 a 标签下载文件
后台管理项目涉及到文件下载到本地,类型包括(图片,音频,视频,office文件等等),只需将后台接口提供的url给到 a 标签即可。
<div class="preview-download" @click.stop="downLoad(item.oldUrl)"><a :href="flag?downUrl: '##'">下载</a> </div>
亲测结果:
绝大多数文件可以实现下载,MP3/MP4会直接打开预览播放,所以只能让其在预览窗口点击自有下载按钮下载。
因为是从oss的地址,导致a标签下载的文件不是原文件名,所以建议通过接口实现下载;downLoad(data){this.affixInfo.attachName = data.attachNamethis.affixInfo.filename = data.namedownfile(this.affixInfo,{ responseType: "blob" }).then(result=>{let BLOB = new Blob([result]);let url = window.URL.createObjectURL(BLOB);let link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', this.affixInfo.filename); // 动态设置原文件名document.body.appendChild(link);link.click();}) },
通过 a 标签下载文件相关推荐
- a标签下载文件,js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
- 使用a标签下载文件,浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案 背景 一.HTML中的a标签实现点击下载 二.即使使用a标签的download属性,chrome浏览器还是会打开 三.解决方案 解决方案一:使用ajax请 ...
- js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
- jsp + servlet 通过a 标签下载文件
在开发项目时遇到,在jsp 中通过 a 标签的方式,访问后台servlet,调用 客户端以下载的方式打开文件,遇到中文文件名乱码,找不到问题,导致下载失败问题,弄了很久才弄出点样子,不是 ...
- a标签下载文件header中带上用于鉴权的token
加了统一鉴权以后 如果把下载接口也拦截了 且前端使用的是a标签 可以用如下方法解决 替换调请求url和请求方式 , 方式一和方式二任意注释一个就可以运行了 方式1用的是原生的XmlHttpReque ...
- A 标签下载文件 Header 中带上用于鉴权的 Token
加了统一鉴权以后,可能会把 A 标签下载的接口也给拦截了,但是 A 标签是无法带上 Token 的,本文将介绍如何让 A 标签支持像 Ajax 一样发送请求. 加了统一鉴权以后 如果把下载接口也拦截了 ...
- Vue项目:js模拟点击a标签下载文件并重命名,URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法 一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
- JS a标签下载文件而不打开文件
// 下载文件 function downfile(obj) {var url = $(obj).attr("files");//url = "http://10.19. ...
- a标签下载文件,浏览器变打开预览的解决方案
前景: 处理接口返回的文件链接需要下载,例如http://xxxxx/xxx.jpeg,使用a标签进行下载时(加了download),浏览器对这些类型的文件可以解析,还会打开这个文件在浏览器上进行预览 ...
- 通过a标签下载文件,不能下载原因
<a href="../api/v1/file/downloadTemplate?templateFileName=sampleExcel.xls&downloadFileNa ...
最新文章
- 函数参数传递常用的三种方式
- CSP认证201709-2	公共钥匙盒[C++题解]:结构体、排序、枚举
- P3243 [HNOI2015]菜肴制作(拓扑排序、贪心)
- FPGA中亚稳态——让你无处可逃
- 联想高校AI精英挑战赛中大收官,“人工智能眼科机器人”获全国总决赛最后入场券
- python和java学哪个好-Python VS Java,学哪个更有前途?
- Eclipse、IntelliJ IDEA、TortoiseSVN清除svn帐号
- 从10秒到2秒!ElasticSearch性能调优实践
- python截取某一段文字分栏_Python文本数据互相转换(pandas and win32com)
- 13. GameProjec1_GameEngine
- gis怎么提取水系_ArcGIS水文分析实战教程(7)细说流域提取
- web渗透--4--web渗透测试清单
- 360监测显示:cookie没有httponly标志解决方法
- python 串口助手 简书_【Python】PyQt5之串口助手【2】
- python瀑布图怎么做_用Matplotlib模拟原始瀑布图
- Python爬虫之自动下载图片
- 微信投票活动文明好人评选怎么刷票
- 芬兰ZYFRA公司在首届中俄创新大赛中获胜
- 什么是推荐系统与常见的推荐系统评价指标
- D-OJ刷题日记:直接插入排序验证性实验 题目编号:584
热门文章
- 【Android测试】AndroidStudio通过UIAutomator进行测试
- myeclipse 修改jsp模板
- MODIS数据批量下载
- tomcat修改端口号 / 同时运行多个tomcat
- matlab2018A配置cuda,使用教程 | matlab 2018a + cuda 10.1 + vs 2017
- 文字转语音真人发声免费的有哪些?文字转语音有这两款软件就够了
- JDK动态代理的意义和用法
- 查看svn服务器上的文件,如何在命令行通过SVN命令筛选出修改过的文件并递交
- WEB渗透测试工程师需要具备的技能
- 2017华为面试算法题小结