<a href={url} target="_blank">download</a>

window.location.href = url; // 當(dāng)前tab
window.open(url); // 新tab

<a href={url} download={fileName}>download</a>

function downloadFile(url, fileName) {
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

// 封裝一個(gè)fetch download方法
async function fetchDownload(fetchUrl, method = "POST", body = null) {
    const response = await window.fetch(fetchUrl, {
        method,
        body: body ? JSON.stringify(body) : null,
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
        },
    });
    const fileName = getFileName(response);
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    return { blob, url, fileName }; // 返回blob、download url、fileName
}
// 根據(jù)response header獲取文件名
function getFileName(response) {
    const disposition = response.headers.get('Content-Disposition');

    // 本例格式是："attachment; filename="img.jpg""
    let fileName = disposition.split('filename=')[1].replaceAll('"', '');

    // 可以根據(jù)自己的格式來(lái)截取文件名
    // 參考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition
    // let fileName = '';
    // if (disposition && disposition.indexOf('attachment') !== -1) {
    //     const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
    //     fileName = matches?.[1]?.replace(/['"]/g, '');
    // }
    fileName = decodeURIComponent(fileName);
    return fileName;
}

// 頁(yè)面里調(diào)用
// get
fetchDownload('/api/get/file?name=img.jpg', 'GET').then(({ blob, url, fileName }) => {
    downloadFile(url, fileName); // 調(diào)用方案二的download方法
});
// post
fetchDownload('/api/post/file', 'POST', { name: 'img.jpg' }).then(({ blob, url, fileName }) => {
    downloadFile(url, fileName);
});

if (window.URL) {
    window.URL.revokeObjectURL(url);
} else {
    window.webkitURL.revokeObjectURL(url);
}

downloadFile("/files/file1.txt", "file1.txt");
downloadFile("/files/word1.docx", "word1.docx");
downloadFile("/files/img1.jpg", "img1.jpg");

// 先封裝一個(gè)方法，請(qǐng)求返回文件blob
async function fetchBlob(fetchUrl, method = "POST", body = null) {
    const response = await window.fetch(fetchUrl, {
        method,
        body: body ? JSON.stringify(body) : null,
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
        },
    });
    const blob = await response.blob();
    return blob;
}

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n"); // 支持純文本等

zip.file("img1.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // 支持Promise類(lèi)型，需要返回?cái)?shù)據(jù)類(lèi)型是 String, Blob, ArrayBuffer, etc
zip.file("img2.jpg", fetchBlob('/api/post/file', 'POST', { name: 'img.jpg' })); // 同樣支持post請(qǐng)求，只要返回類(lèi)型正確就行

const folder1 = zip.folder("folder01"); // 創(chuàng)建folder
folder1.file("img3.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // folder里創(chuàng)建文件

zip.generateAsync({ type: "blob" }).then(blob => {
    const url = window.URL.createObjectURL(blob);
    downloadFile(url, "test.zip");
});

zip.generateAsync({ type: "blob" }, metadata => {
    const progress = metadata.percent.toFixed(2); // 保留2位小數(shù)
    console.log(metadata.currentFile, "progress: " + progress + " %");
}).then(blob => ... );