vue 前端自动打开文件地址进行下载
最近在做异步导出的功能,导出的过程中前端另外启动一个查询导出进度的线程接口。如果导出完成后,把生成的文件上传到服务器,返回给前端一个文件的下载地址;前端自动打开这个地址进行跳转下载。
有两种方式
1.直接使用js自带的方式打开链接
这种方式有一个问题,会被浏览器自动拦截弹出的窗口:”已阻止弹出窗口“,导致用户下载文件失败,会认为程序报错。可以用方案2
window.open(url)
2.用代码创建一个隐藏的a标签
用代码创建一个隐藏的a标签,把下载地址赋值给a标签的href属性,然后用js模拟鼠标点击进行下载文件。
const link = document.createElement('a'); link.href = url; link.download = 'file.xls'; link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link);