CSDN

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

2023-12-15 16:15 由 大稳·杨 发表于 #前端开发

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

有两种方式

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

热门相关：山神   凤逆天下：战神杀手妃   美食供应商   万道龙皇   扑倒老公大人