Ajax/Axios/Fetch 自動彈出下載文件，最優解研究

通過JS調用axios和fetch下載文件，但卻不會自動彈出下載。想讓瀏覽器自動彈出下載，卻要額外做些工作。

但發現網絡上絕大多數的解決方案，都是動態創建一個<a href=xxx>鏈接，然後自動點擊，最後再動態刪除a節點。一直覺得這種方式很繁瑣，顯然這不是我想要的解決方案。

繼續研究，發現中間核心的代碼主要是兩個地方：

一是const blob = response.blob()，即是把返回數據轉換爲blob格式；

二是URL.createObjectURL(blob)，即是將這個blob數據封裝成一個新的地址。

於是有了靈感，爲何不直接跳轉到這個URL呢？？

const blob = response.blob();

location.href = URL.createObjectURL(blob);

成功！！！

我同時也搜到，在stackoverflow論壇已經有國外技術這麼用了，但他的使用的是location.assign(blob)。結合整理下，完整代碼爲：

fetch(uri, {
    baseURL: 'http://localhost:8080',
    method: 'GET',
    credentials: 'include',
    mode: 'cors',
    headers: {
        Authentication: token
    },
}).then(res => res.blob()).then(res => {
    const file = URL.createObjectURL(res);
    location.assign(file);
}).catch(err => console.log(err));

---

但是發現個問題，文件名是隨機的，並不是原始文件名。

折騰了半天，發現並沒有解決方法。

如果需要下載時保留原始文件名，仍舊需要採用創建a標籤的方式。

但依然可以簡化：並不需要在html節點中添加然後再刪除，直接創建a節點對象即可：

const objUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = objUrl;
a.download = filename;
a.click();

如有更簡潔的方案，歡迎留言！