vue 前端自动打开文件地址进行下载

ue 前端自动打开文件地址进行下载

　　最近在做异步导出的功能，导出的过程中前端另外启动一个查询导出进度的线程接口。如果导出完成后，把生成的文件上传到服务器，返回给前端一个文件的下载地址；前端自动打开这个地址进行跳转下载。

有两种方式

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);