FileSaver.js：轻松实现浏览器文件下载

简介

FileSaver.js 是一个优秀的客户端文件保存库，它允许在浏览器中轻松地生成和保存文件。无论是文本文件、图片还是其他类型的文件，FileSaver.js 都能帮助我们优雅地处理文件下载需求。

安装方式

NPM 安装

npm install file-saver

CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

基本用法

保存文本文件

import { saveAs } from 'file-saver';

const content = '这是文件内容';
const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello.txt");

保存图片

import { saveAs } from 'file-saver';

// 从 URL 保存图片
const imageUrl = 'https://example.com/image.jpg';
fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => saveAs(blob, "image.jpg"));

高级用法

保存 Canvas 内容

const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
    saveAs(blob, "canvas-image.png");
});

保存大文件

const largeContent = new Blob([largeArrayBuffer], {type: "application/octet-stream"});
saveAs(largeContent, "large-file.zip");

浏览器兼容性

FileSaver.js 支持以下主流浏览器：

• Chrome 20+
• Firefox 14+
• Safari 10.1+
• Edge/IE 10+

注意事项

1. 文件大小限制：不同浏览器对 Blob 大小有不同限制
2. 文件名编码：建议使用英文文件名避免编码问题
3. MIME 类型：正确设置文件的 MIME 类型以确保正常下载

常见应用场景

1. 导出表格数据为 CSV 文件

const csvContent = "姓名,年龄\n张三,25\n李四,30";
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
saveAs(blob, "用户数据.csv");

2. 下载生成的 PDF

// 假设已经使用 PDF 生成库创建了 PDF blob
const pdfBlob = generatePDF(); // 这里是示例函数
saveAs(pdfBlob, "报告.pdf");

总结

FileSaver.js 是一个简单但功能强大的文件保存工具，它能满足大多数前端开发中的文件下载需求。通过简单的 API，我们可以轻松实现各种文件的客户端下载功能，提升用户体验。