需求
初期是使用 window.open() 实现的文件下载,但默认会跳转到新窗口进行文件下载而出现闪屏现象.
现在就需要点击按钮实现文件下载,在当前页面不要出现页面跳转的闪屏效果,提高用户体验.
解决方法
1.使用 window.location.href 修改当前页面路径
- 动态创建 a 标签并触发 href 事件
解决思路
方法一
- location.href 修改当前路径，在当前窗口进行文件下载
window.location.href = 下载路劲;
方法二
1.原理: a 标签有实现文件下载的功能,并且无需跳转, a 标签的 href 属性设置为文件路径即可
<a href="https://cdn.shopify.com/s/files/1/1545/3617/files">download</a>
2.用 JS 动态创建 a 标签,设置下载路径后,触发点击事件实现下载.
let a = document.createElement("a");
a.setAttribute("href", res.data);
a.click();
3.下载完后清除 a 标签,防止反复添加.
setTimeout(() => {
a.remove();
}, 1000);
