npm 包 filesaver.js-npm 使用教程

前言

在前端开发过程中，我们常常需要处理文件的下载、保存等操作，为了避免重复的劳动，我们可以使用一些已经成熟、稳定的工具来简化开发工作，filesaver.js-npm 就是其中一个不错的选择。该 npm 包提供了一个可跨浏览器使用的接口，使我们能够以 JavaScript 的形式生成文件并将其保存在用户的电脑上，具有很高的实用性。在本篇文章中，我们将介绍如何使用 filesaver.js-npm 包进行文件的下载和保存。

安装

在开始使用 filesaver.js-npm 之前，你需要先安装它。可以使用 npm 在命令行中执行以下命令进行安装：

npm install file-saver

安装完成之后，在你的项目中引入它：

import { saveAs } from 'file-saver';

如何使用

下载文件

下载文件的代码非常简单：

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

首先，我们定义了一个字符串 data，这是我们要下载的文件内容。然后，我们使用 Blob 对象将字符串数据转换为一个 Blob 对象。最后，我们使用 saveAs 函数将数据保存为指定的文件名。

处理二进制文件

如果需要下载二进制文件，我们可以按照如下的代码来处理：

fetch('https://some-url.com/image.jpg')
  .then(res => res.blob())
  .then(blob => {
    saveAs(blob, 'image.jpg');
  });

首先，我们通过 fetch 方法获取二进制数据，然后我们使用 blob() 方法来将 Response 对象转换成 Blob 对象，最后将生成好的 Blob 对象以某个指定名称保存下来即可。

支持更多文件类型

如果需要下载除了文本文件和常见的图片文件之外的其他文件类型，我们只需要将 type 参数设置成需要的 MIME 类型即可。例如，如果需要下载一个 PDF 文件：

const pdfUrl = 'https://some-url.com/document.pdf';
fetch(pdfUrl)
  .then(res => res.blob())
  .then(blob => {
    saveAs(blob, 'document.pdf', { type: 'application/pdf' });
  });

带有回调的保存

你可以在文件成功保存后执行回调，如下所示：

saveAs(blob, 'hello-world.txt', {
  success: () => console.log('保存成功！'),
  error: () => console.error('保存失败！')
});

小结

如此简单、实用的文件下载和保存功能，如果能够快速积累应用案例，不仅可以提高工作效率，还能够大大提升代码的可重用性和健壮性。在本文中，我们介绍了 filesaver.js-npm 包的使用方法以及一些常见的案例，如果你遇到了类似的需求，不妨试一试它。

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