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

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

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

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

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

<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>

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