npm 包 FileSaver.js 使用教程

在前端开发中，我们经常需要将浏览器中的数据或文件保存到本地硬盘中。FileSaver.js 是一个可以实现这一功能的 npm 包，它提供了简单易用的 API，兼容性良好，支持多种格式的文件保存。

安装

使用 npm 安装 FileSaver.js：

npm install file-saver --save

用法

保存文本文件

import { saveAs } from 'file-saver';

const text = "Hello, world!";
const filename = "hello.txt";

const blob = new Blob([text], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename);

以上代码将创建一个包含 "Hello, world!" 文本内容的 Blob 对象，并将其保存为名为 "hello.txt" 的文本文件。saveAs() 方法接受两个参数：要保存的 Blob 对象和文件名。

保存二进制文件

const bytes = [0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21];
const filename = "hello.bin";

const blob = new Blob([new Uint8Array(bytes)]);
saveAs(blob, filename);

以上代码将创建一个包含十六进制字节序列 [0x48, 0x65, ..., 0x21] 的 Blob 对象，并将其保存为名为 "hello.bin" 的二进制文件。

保存图片文件

import axios from 'axios';

const imgUrl = 'https://example.com/image.png';
const filename = "image.png";

axios.get(imgUrl, { responseType: 'blob' }).then(response => {
  saveAs(response.data, filename);
});

以上代码将通过 axios 发送 GET 请求获取一张图片，将图片数据保存为 Blob 对象，并将其保存为名为 "image.png" 的 PNG 文件。

兼容性

FileSaver.js 支持 IE10+、Edge、Chrome、Firefox 和 Safari 浏览器。

学习与指导意义

FileSaver.js 是一个非常有用的 npm 包，可以方便地将浏览器中的数据或文件保存到本地硬盘中。在开发过程中，我们常常需要实现这种功能，而 FileSaver.js 提供了简单易用的 API，让我们能够更加高效地完成此类任务。

同时，学习使用 FileSaver.js 也有助于我们深入理解浏览器中 Blob 对象和文件保存相关的知识点。这些知识点对于前端开发者来说是非常重要的，掌握它们能够提高我们的开发效率和技术水平。

总结

本文介绍了如何使用 FileSaver.js npm 包保存文本、二进制和图片文件，并讨论了该包的兼容性和学习与指导意义。在实际开发中，FileSaver.js 可以帮助我们更高效地完成文件保存等任务，在深入理解浏览器相关知识点的同时，提升我们的技术水平。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32625