file-saver：前端文件下载的 JavaScript 库使用指南

file-saver 是一个用于在浏览器端保存文件的 JavaScript 库，通常用于生成和下载文件，而不依赖服务器。它常用于处理 Blob 对象，并提供了一种简便的方法来触发文件下载。

1. 安装

你可以使用 npm 或 yarn 安装 file-saver：

npm install file-saver
# 或者
yarn add file-saver

2. 基本用法

import { saveAs } from "file-saver";

const blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });
saveAs(blob, "hello.txt");

上述代码会创建一个包含 "Hello, world!" 的文本文件，并在浏览器中触发下载，文件名为 hello.txt。

3. 适用于不同文件类型

file-saver 支持保存各种格式的文件，只需指定正确的 MIME 类型：

保存文本文件（.txt）

const textBlob = new Blob(["This is a text file"], { type: "text/plain" });
saveAs(textBlob, "example.txt");

保存 JSON 文件（.json）

const jsonBlob = new Blob([JSON.stringify({ key: "value" }, null, 2)], { type: "application/json" });
saveAs(jsonBlob, "data.json");

保存 CSV 文件（.csv）

const csvData = "Name,Age,Location\nAlice,25,USA\nBob,30,Canada";
const csvBlob = new Blob([csvData], { type: "text/csv;charset=utf-8" });
saveAs(csvBlob, "data.csv");

保存图片文件（.png, .jpg）

fetch("https://example.com/image.png")
  .then((res) => res.blob())
  .then((blob) => saveAs(blob, "image.png"));

保存 PDF 文件（.pdf）

fetch("https://example.com/sample.pdf")
  .then((res) => res.blob())
  .then((blob) => saveAs(blob, "document.pdf"));

4. 处理文件 URL

如果你有一个文件的 URL，可以直接下载：

saveAs("https://example.com/sample.pdf", "download.pdf");

但是，某些浏览器（如 Safari）可能不会下载跨域文件，因此推荐先 fetch 文件再 saveAs。

5. 与 canvas 结合使用

可以从 canvas 生成图片并下载：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

canvas.toBlob((blob) => {
  saveAs(blob, "canvas-image.png");
});

6. 兼容性

file-saver 兼容现代主流浏览器，包括 Chrome、Firefox、Edge、Safari（需适配）。但 不支持 IE，除非使用 polyfill（如 blob.js）。

7. 相关补充

• file-saver 依赖 Blob，在 Safari 需要 toBlob 兼容处理。
• 可与 jszip 结合，先打包 ZIP，再用 file-saver 下载。
• 支持 saveAs(data: Blob | File | string, filename: string, disableAutoBOM?: boolean) 形式调用。

8. 示例：将 file-saver 与 jszip 结合

import { saveAs } from "file-saver";
import JSZip from "jszip";

const zip = new JSZip();
zip.file("hello.txt", "Hello, world!");
zip.file("data.json", JSON.stringify({ key: "value" }, null, 2));

zip.generateAsync({ type: "blob" }).then((blob) => {
  saveAs(blob, "archive.zip");
});

9. 总结

• file-saver 适用于前端文件下载，尤其是 Blob、URL 文件等。
• 适用于文本、JSON、CSV、图片、PDF、ZIP 等格式。
• 结合 jszip 还能下载多个文件打包成 ZIP。

这是一个简单易用的下载工具，适用于前端开发。你有具体的应用场景或问题吗？