前端实现文件下载的4种常见方式与实战示例_Javascript

引言

在前端开发中，实现文件下载是一个非常常见的需求，例如：

下载图片、pdf、excel 等文件
将前端生成的数据导出为文件（如 json、csv、excel）
使用 blob、data url、stream 方式进行下载

本篇文章将介绍 4 种前端文件下载的方式，并提供详细示例，帮助你掌握文件下载的各种技巧。

1. 直接使用 <a> 标签下载（适用于静态文件）

原理

html <a> 标签的 download 属性可以直接下载链接文件，无需 javascript 处理。

示例：下载本地文件

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

说明：

href="/files/example.pdf" 指向文件路径
download="example.pdf" 指定下载时的文件名称

示例：下载网络图片

<a href="https://example.com/image.jpg" rel="external nofollow"  download="my-image.jpg">下载图片</a>

注意：

仅适用于同源文件
跨域文件需要服务器支持 access-control-allow-origin

2. 使用 javascript blob 方式下载文件

原理

blob（二进制大对象）可以用来存储二进制数据，并创建可下载的 url。

示例：下载文本文件

function downloadtextfile() {
    const content = "hello, this is a text file!";
    const blob = new blob([content], { type: "text/plain" }); // 创建 blob
    const url = url.createobjecturl(blob); // 生成临时 url

    const a = document.createelement("a");
    a.href = url;
    a.download = "example.txt"; // 设置下载文件名
    document.body.appendchild(a);
    a.click(); // 触发下载
    document.body.removechild(a);
    url.revokeobjecturl(url); // 释放 url
}

downloadtextfile();

适用场景：前端生成文件，如文本、json、csv、html。

3. 使用 fetch 下载文件（适用于后端 api 提供的文件）

原理

使用 fetch() 请求文件，并将其转换为 blob 进行下载。

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

async function downloadfilefromserver(url, filename) {
    const response = await fetch(url);
    const blob = await response.blob(); // 将响应转换为 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);
}

// 调用示例
downloadfilefromserver("https://example.com/report.pdf", "report.pdf");

适用场景：

后端提供的文件下载
excel、pdf、图片等二进制文件

4. 使用 canvas 生成图片并下载

原理

canvas.toblob() 可以将 canvas 画布转换为 blob，然后使用 url.createobjecturl() 进行下载。

示例：下载 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");

    // 画一个红色矩形
    ctx.fillstyle = "red";
    ctx.fillrect(50, 50, 100, 100);

    // 将 canvas 转换为 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>

适用场景：截图、绘图工具、导出 canvas 生成的图像。

5. 额外优化：进度显示 & 大文件下载

对于大文件下载，可以使用 readablestream 进行流式下载，并显示进度。

示例：下载大文件并显示进度

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(`下载进度：${((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);
}

// 调用示例
downloadlargefile("https://example.com/large-file.zip", "large-file.zip");

适用场景：大文件下载、断点续传、流式处理。

6. 前端下载文件的最佳实践

方法	适用场景	优点	缺点
<a> 标签	静态文件	简单易用	仅适用于同源文件
blob + url.createobjecturl()	前端生成文件	适用于所有文件类型	需手动释放 url
fetch() 方式	api 提供的文件下载	适用于二进制数据	需处理 cors 问题
canvas.toblob()	生成图片并下载	适用于 canvas	仅适用于 canvas 内容
流式下载 (readablestream)	大文件、进度控制	适合断点续传	代码复杂