之前处理文件下载功能一直使用的是 Windows.open(URL) 的方式. 这样当然也是可以实现文件下载功能的, 而且使用起来还很方便.
但是有一次测试发现这个方法在 Safari 浏览器中并不能正常下载, 于是我又开始寻找兼容性更好的下载功能实现方案. 今天给大家推荐的是一个我目前一直在使用, 而且到目前为止还没有发现兼容性问题的一个解决方案. 当然, 如果大家在使用过程中发现此方案存在什么 bug, 也欢迎在评论区进行发言, 发现问题, 解决问题, 才能促使大家共同成长.
其实 html 中的 < a > 标签不光有导航链接的作用, 同时还能实现文件下载功能. 具体用法如下:
<a id="downLoadExcel" :href="downLoadTemplateURL" :download="filename"></a>
在 < a > 标签中添加 download 属性即可实现点击下载功能. 这里最好在前端指定下载的文件名, 因为有时候通过后台提供文件名会产生乱码, 而由前端指定文件名则完全没有这方面的顾虑.
downLoadTemplateURL 与 filename 都是通过动态赋值的, 这样, 无论是在开发环境还是生产环境, 代码都可以复用, 不需要进行修改.
具体实现代码如下:
- downLoadExcelTemplate() {
- const vm = this
- vm.downLoadTemplateURL = vm.apiHost + "downloadYourFileURL"
- vm.filename = "myTest.pdf"
- setTimeout( () => {
- document.querySelector("#downLoadExcel").click()
- },500)
- },
我这里采用的是点击自定义按钮, 在自定义按钮的点击事件中主动触发 <a> 标签的点击事件的方法. 这样可以在触发下载文件功能前进行额外操作.
至于对 click 进行延迟触发 -- 也就是使用 setTimeout() 方法, 是为了在修改下载路径和文件名后给浏览器预留足够的时间将变量值渲染到 < a > 标签中. 否则在触发 click 事件时, 对应值还没有成功渲染, 会导致无法成功下载.
经过测试这个方法是完全能够满足绝大部门需求的, 如果你还有什么其他方案, 欢迎分享出来, 大家一起学习, 共同进步.
结束语
如果你喜欢本篇文章欢迎点赞, 关注. 你的支持是我继续分享的最大动力.
来源: https://juejin.im/post/5bcfd91f5188257778745101