目錄

0.JS簡介

前言

單個文件Download

方案一：location.href or window.open

方案二：通過a標(biāo)簽的download屬性

方案三：API請求

多個文件批量Download

方案一：按單個文件download方式，循環(huán)依次下載

方案二：前端打包成zip download

方案三：后端壓縮成zip，然后以文件流url形式，前端調(diào)用download

總結(jié)

0.JS簡介

JavaScript是一種基于原型的語言，它意味著它不使用類來定義對象，而是使用原型來定義對象和它們的屬性和方法。這種原型繼承模式是JavaScript的一個獨特特征，使其與其他基于類的語言（如Java和C++）有所不同。

JavaScript在Web開發(fā)中扮演著非常重要的角色。在Web應(yīng)用程序中，它可以用來驗證表單、處理數(shù)據(jù)、響應(yīng)用戶交互等。JavaScript可以與HTML和CSS結(jié)合使用，創(chuàng)建交互式的、動態(tài)的Web頁面。它可以與各種Web框架（如React、Angular和Vue.js）一起使用，以便更輕松地開發(fā)大規(guī)模的Web應(yīng)用程序。

除了Web開發(fā)之外，JavaScript還可以用于服務(wù)器端開發(fā)。使用Node.js平臺，JavaScript可以用于構(gòu)建高度可伸縮的Web應(yīng)用程序和API。Node.js是一個基于事件驅(qū)動、非阻塞I/O的平臺，它使JavaScript可以在服務(wù)器端運(yùn)行。Node.js包含了許多內(nèi)置的模塊，可以輕松地處理文件、網(wǎng)絡(luò)、加密和HTTP請求等任務(wù)。

JavaScript還可以用于移動應(yīng)用程序開發(fā)。與桌面應(yīng)用程序不同，移動應(yīng)用程序需要一種跨平臺的語言來開發(fā)應(yīng)用程序。JavaScript可以用于開發(fā)基于React Native的移動應(yīng)用程序，這是一個用于構(gòu)建原生移動應(yīng)用程序的開源框架。使用React Native，開發(fā)人員可以使用JavaScript開發(fā)應(yīng)用程序，并在iOS和Android上運(yùn)行相同的代碼。

JavaScript的語法相對簡單，學(xué)習(xí)起來比較容易。它有許多內(nèi)置函數(shù)和方法，可以用于處理字符串、數(shù)組、對象等常見的數(shù)據(jù)類型。JavaScript也支持閉包、高階函數(shù)和函數(shù)式編程等概念，這些概念使代碼更加靈活和可重用。

前言

在前端Web開發(fā)中，下載文件是一個很常見的需求，也有一些比較特殊的Case，比如下載文件請求是一個POST、url不是同源的、批量下載文件等。本文就介紹下幾種download解決方案，以及特殊Case的最佳方案選擇。

單個文件Download

方案一：location.href or window.open

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

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

缺點：

1.只支持get請求，不支持post請求。

2.瀏覽器會根據(jù)header的content-type來判斷是下載文件還是預(yù)覽文件。

比如?txt?png?等格式文件，會在當(dāng)前tab或新tab中預(yù)覽，而不是下載下來。

3.由于只支持get，會有url參數(shù)過長問題。

4.不能加request header，無法做權(quán)限驗證等邏輯。

5.不支持自定義file name。

方案二：通過a標(biāo)簽的download屬性

通過HTML a標(biāo)簽的原生屬性，使用瀏覽器下載。

<a> - HTML（超文本標(biāo)記語言） | MDN

<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);
}

優(yōu)點：

• 都是走的瀏覽器下載文件邏輯，不會預(yù)覽文件。
• 當(dāng)前tab打開方式下載。
• 支持設(shè)置file name。

缺點：

• 只支持get請求，不支持post請求。
• 不能加request header，無法做權(quán)限驗證等邏輯。
• 不支持跨域地址。

方案三：API請求

API發(fā)送請求的方式，獲取文件blog對象，然后通過URL.createObjectURL方法獲取download url，然后用方案二的<a download />方式下載。

// 封裝一個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ù)自己的格式來截取文件名
    // 參考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;
}

// 頁面里調(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);
});

URL.createObjectURL?生成的url如果過多會有效率問題，可以在合適的時機(jī)（download后）釋放掉。

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

優(yōu)點：

• 因為最后用的是方案二，所以滿足方案二的優(yōu)點。
• 支持post請求、支持跨域（fetch本身支持）。
• 可以加request header。

缺點：

• 低版本瀏覽器不支持，可以通過'download' in document.createElement('a')判斷是否支持。
• 瀏覽器兼容可能有問題，比如Safari、IOS Safari。

多個文件批量Download

有些需求是，點一個按鈕需要把多個文件同時download下來，有以下幾個方案可以實現(xiàn)。

方案一：按單個文件download方式，循環(huán)依次下載

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

利用上面的方案二的<a download />方式下載，會觸發(fā)瀏覽器是Download multiple files提示，如果選了Allow則會正常下載。

嘗試每個download之間加延遲，依然會彈提示。這個應(yīng)該是瀏覽器機(jī)制問題了，沒辦法避免了。

方案二：前端打包成zip download

前端可以通過一個第三方庫?jszip，可以把多個文件以blob、base64或純文本等形式，按自定義的文件結(jié)構(gòu)，壓縮成一個zip文件，然后通過瀏覽器download下來。

// 先封裝一個方法，請求返回文件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類型，需要返回數(shù)據(jù)類型是 String, Blob, ArrayBuffer, etc
zip.file("img2.jpg", fetchBlob('/api/post/file', 'POST', { name: 'img.jpg' })); // 同樣支持post請求，只要返回類型正確就行

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");
});

jszip還支持一些別的類型文件壓縮，比如純文本、base64、binary等等，詳見：

由于走的是純前端壓縮，所以會有延遲問題，走到最后download時才會調(diào)起瀏覽器下載，所以頁面可能需要一個效果來更新壓縮進(jìn)度。zip.generateAsync方法就支持第二個參數(shù)，支持進(jìn)度更新：

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

方案三：后端壓縮成zip，然后以文件流url形式，前端調(diào)用download

后臺加個api，然后把需要download的文件在后臺壓縮成zip，然后把文件流輸出出來。然后就和單個文件download一樣了。

因為后臺會先壓縮，會有延遲才會把blob返回前臺，而且需要傳多個文件信息，一般是post請求，所以建議使用單個文件下載的方案三通過API請求實現(xiàn)，在請求前后加上提示語或loading效果。

總結(jié)

本文介紹了前端單個文件的下載方案，以及批量多個文件下載的解決方案。最后整理下方案建議：

單個文件下載：

• 如果url是同源的，并且是一個服務(wù)器上的靜態(tài)文件路徑、或者是一個get請求，推薦方案二即?<a download />方式下載。
• 反之，方案三即API請求方式。

批量文件下載：文章來源地址http://www.zghlxwxcb.cn/news/detail-427913.html

• 如果有zip壓縮需求，選方案二或方案三;
• 如果可以接受彈Download multiple files提示，用方案一；反之方案二或方案三;

到了這里，關(guān)于詳解JS實現(xiàn)單個或多個文件批量下載的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！