前端實(shí)現(xiàn)文件下載的4種常見(jiàn)方式與實(shí)戰(zhàn)示例

更新時(shí)間：2025年04月16日 08:34:03 作者：阿達(dá)C

在前端開(kāi)發(fā)中,實(shí)現(xiàn)文件下載是一個(gè)非常常見(jiàn)的需求,本篇文章將介紹 4 種前端文件下載的方式,并提供詳細(xì)示例,希望能幫助大家掌握文件下載的各種技巧

引言
1. 直接使用 <a> 標(biāo)簽下載（適用于靜態(tài)文件）
2. 使用 JavaScript Blob 方式下載文件
3. 使用 fetch 下載文件（適用于后端 API 提供的文件）
4. 使用 canvas 生成圖片并下載
5. 額外優(yōu)化：進(jìn)度顯示 & 大文件下載
6. 前端下載文件的最佳實(shí)踐
結(jié)論

引言

在前端開(kāi)發(fā)中，實(shí)現(xiàn)文件下載是一個(gè)非常常見(jiàn)的需求，例如：

下載圖片、PDF、Excel 等文件
將前端生成的數(shù)據(jù)導(dǎo)出為文件（如 JSON、CSV、Excel）
使用 Blob、Data URL、Stream 方式進(jìn)行下載

本篇文章將介紹 4 種前端文件下載的方式，并提供詳細(xì)示例，幫助你掌握文件下載的各種技巧。

1. 直接使用 <a> 標(biāo)簽下載（適用于靜態(tài)文件）

原理

HTML <a> 標(biāo)簽的 download 屬性可以直接下載鏈接文件，無(wú)需 JavaScript 處理。

示例：下載本地文件

<a href="/files/example.pdf" rel="external nofollow"  download="example.pdf">下載 PDF 文件</a>

說(shuō)明：

href="/files/example.pdf" 指向文件路徑
download="example.pdf" 指定下載時(shí)的文件名稱

示例：下載網(wǎng)絡(luò)圖片

<a  rel="external nofollow"  download="my-image.jpg">下載圖片</a>

注意：

僅適用于同源文件
跨域文件需要服務(wù)器支持 Access-Control-Allow-Origin

2. 使用 JavaScript Blob 方式下載文件

原理

Blob（二進(jìn)制大對(duì)象）可以用來(lái)存儲(chǔ)二進(jìn)制數(shù)據(jù)，并創(chuàng)建可下載的 URL。

示例：下載文本文件

function downloadTextFile() {
    const content = "Hello, this is a text file!";
    const blob = new Blob([content], { type: "text/plain" }); // 創(chuàng)建 Blob
    const url = URL.createObjectURL(blob); // 生成臨時(shí) URL

    const a = document.createElement("a");
    a.href = url;
    a.download = "example.txt"; // 設(shè)置下載文件名
    document.body.appendChild(a);
    a.click(); // 觸發(fā)下載
    document.body.removeChild(a);
    URL.revokeObjectURL(url); // 釋放 URL
}

downloadTextFile();

適用場(chǎng)景：前端生成文件，如文本、JSON、CSV、HTML。

3. 使用 fetch 下載文件（適用于后端 API 提供的文件）

原理

使用 fetch() 請(qǐng)求文件，并將其轉(zhuǎn)換為 Blob 進(jìn)行下載。

示例：下載后端提供的文件

async function downloadFileFromServer(url, filename) {
    const response = await fetch(url);
    const blob = await response.blob(); // 將響應(yīng)轉(zhuǎn)換為 Blob

    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href);
}

// 調(diào)用示例
downloadFileFromServer("https://example.com/report.pdf", "report.pdf");

適用場(chǎng)景：

后端提供的文件下載
Excel、PDF、圖片等二進(jìn)制文件

4. 使用 canvas 生成圖片并下載

原理

canvas.toBlob() 可以將 canvas 畫(huà)布轉(zhuǎn)換為 Blob，然后使用 URL.createObjectURL() 進(jìn)行下載。

示例：下載 canvas 生成的圖片

<canvas id="myCanvas" width="200" height="200"></canvas>
<button onclick="downloadCanvas()">下載圖片</button>

<script>
function downloadCanvas() {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 畫(huà)一個(gè)紅色矩形
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);

    // 將 canvas 轉(zhuǎn)換為 Blob 并下載
    canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "canvas-image.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }, "image/png");
}
</script>

適用場(chǎng)景：截圖、繪圖工具、導(dǎo)出 canvas 生成的圖像。

5. 額外優(yōu)化：進(jìn)度顯示 & 大文件下載

對(duì)于大文件下載，可以使用 ReadableStream 進(jìn)行流式下載，并顯示進(jìn)度。

示例：下載大文件并顯示進(jìn)度

async function downloadLargeFile(url, filename) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    const contentLength = +response.headers.get("Content-Length");

    let receivedLength = 0;
    let chunks = [];

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
        receivedLength += value.length;
        console.log(`下載進(jìn)度：${((receivedLength / contentLength) * 100).toFixed(2)}%`);
    }

    const blob = new Blob(chunks);
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(a.href);
}

// 調(diào)用示例
downloadLargeFile("https://example.com/large-file.zip", "large-file.zip");

適用場(chǎng)景：大文件下載、斷點(diǎn)續(xù)傳、流式處理。

6. 前端下載文件的最佳實(shí)踐

方法	適用場(chǎng)景	優(yōu)點(diǎn)	缺點(diǎn)
<a> 標(biāo)簽	靜態(tài)文件	簡(jiǎn)單易用	僅適用于同源文件
Blob + URL.createObjectURL()	前端生成文件	適用于所有文件類型	需手動(dòng)釋放 URL
fetch() 方式	API 提供的文件下載	適用于二進(jìn)制數(shù)據(jù)	需處理 CORS 問(wèn)題
canvas.toBlob()	生成圖片并下載	適用于 canvas	僅適用于 canvas 內(nèi)容
流式下載 (ReadableStream)	大文件、進(jìn)度控制	適合斷點(diǎn)續(xù)傳	代碼復(fù)雜

結(jié)論

前端實(shí)現(xiàn)文件下載的方式多種多樣，選擇合適的方式取決于文件來(lái)源和下載需求：

靜態(tài)文件：使用 <a> 標(biāo)簽的 download 屬性（簡(jiǎn)單易用）

動(dòng)態(tài)生成文件：使用 Blob + URL.createObjectURL()

從服務(wù)器下載文件：使用 fetch() 請(qǐng)求文件并轉(zhuǎn)換為 Blob

大文件或流式下載：使用 ReadableStream 進(jìn)行分塊處理

到此這篇關(guān)于前端實(shí)現(xiàn)文件下載的4種常見(jiàn)方式與實(shí)戰(zhàn)示例的文章就介紹到這了,更多相關(guān)前端文件下載方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: