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

  • vue 前端自动打开文件地址进行下载已关闭评论
  • 87 次浏览
  • A+
所属分类：Web前端
摘要

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

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

有两种方式

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

便宜好用的国外VPS推荐