1. ajax 或 fetch 將資源轉換為 blob ，利用 a 標簽的 download 屬性或 ie 的 saveBlob

• 缺點：如果文件很大，會造成很長時間的 blob 轉化，等待很長時間
• 優點：可以使用 get 或 post，同時可以傳遞 header 參數

// fetch
// const res = await fetch(xxxx)
// const blob = yield res .blob();

// ajax
// cont blob= ajax(xxx)

const bl = new Blob([blob], { type: `application/octet-stream` });
const FN = 'filename.xxx'; // 下載的文件名
if (window.navigator && window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(bl, FN);
} else {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(bl);
    link.download = FN;
    link.click();
    window.URL.revokeObjectURL(link.href);
}

2. 打開一個新頁面利用瀏覽器自帶的下載功能

• 缺點：彈出新頁面，用戶體驗不好，無法使用 post 方式

window.open(xxx)

3. 創建一個 iframe 和 from ，模擬表單提交的方式實現下載

• 缺點：必須使用 post 方式，無法自定義 header 參數
• 優點：可以傳遞各種 body 參數，靜默式

const boxElement = document.createElement('div');
boxElement.style.display = 'display:none;';
const iframeElement = document.createElement('iframe');
iframeElement.style.display = 'none';
iframeElement.name = 'downloadFrame';
const formElement = document.createElement('form');
formElement.style.display = 'none';
formElement.method = 'post';
formElement.action = xxx;
formElement.target = 'downloadFrame';

const inputElement = document.createElement('input'); // 創建提交數據的 input，根據需要可以創建多個
inputElement.type = 'hidden';
inputElement.name = 'field1';
inputElement.value = 'value1';

const buttonElement = document.createElement('button');
buttonElement.type = 'submit';
formElement.appendChild(inputElement);
formElement.appendChild(buttonElement);
boxElement.appendChild(formElement);
boxElement.insertBefore(iframeElement, formElement);
document.body.appendChild(boxElement);
formElement.submit();

4. 創建一個可以加載資源的標簽,比如img，script，iframe

• 缺點：只能使用 get 方式

• 優點：靜默式，代碼簡單，配合 http 206 的協議可以流式的下載

• image

var myImage = new Image(100, 100);
myImage.src = 'xxxx';

• script

var script = document.createElement('script')
script.src = 'xxx';
document.body.appendChild(script);

• iframe

var iframeElement = document.querySelector('#download')
if (!iframeElement) {
    iframeElement = document.createElement('iframe');
    iframeElement.setAttribute('id', 'download');
    iframeElement.style.display = 'none';
}
iframeElement.src = 'xxx'
document.body.appendChild(iframeElement);