需求
初期是使用 window.open() 實(shí)現(xiàn)的文件下載,但默認(rèn)會(huì)跳轉(zhuǎn)到新窗口進(jìn)行文件下載而出現(xiàn)閃屏現(xiàn)象.
現(xiàn)在就需要點(diǎn)擊按鈕實(shí)現(xiàn)文件下載,在當(dāng)前頁面不要出現(xiàn)頁面跳轉(zhuǎn)的閃屏效果,提高用戶體驗(yàn).
解決方法
1.使用 window.location.href 修改當(dāng)前頁面路徑
- 動(dòng)態(tài)創(chuàng)建 a 標(biāo)簽并觸發(fā) href 事件
解決思路
方法一
- location.href 修改當(dāng)前路徑，在當(dāng)前窗口進(jìn)行文件下載
window.location.href = 下載路勁;
方法二
1.原理: a 標(biāo)簽有實(shí)現(xiàn)文件下載的功能,并且無需跳轉(zhuǎn), a 標(biāo)簽的 href 屬性設(shè)置為文件路徑即可
<a >download</a>
2.用 JS 動(dòng)態(tài)創(chuàng)建 a 標(biāo)簽,設(shè)置下載路徑后,觸發(fā)點(diǎn)擊事件實(shí)現(xiàn)下載.
let a = document.createElement("a");
a.setAttribute("href", res.data);
a.click();
3.下載完后清除 a 標(biāo)簽,防止反復(fù)添加.
setTimeout(() => {
a.remove();
}, 1000);
