一文搞定：Vue中，使用file-saver导出文件，下载Excel、图片、文本！

前端

2023-03-10 03:25:56

在 Vue 中使用 File-Saver 库轻松导出文件

什么是 File-Saver？

File-Saver 是一款强大的 JavaScript 库，可让您在 Web 浏览器中轻松保存各种格式的文件。它使导出 Excel 电子表格、图像、文本文件和其他数据类型变得轻而易举。

为何选择 File-Saver？

File-Saver 库脱颖而出，因为它：

易于使用： 只需几行代码即可实现文件导出。
多格式支持： 支持各种文件格式，包括 Excel、图片、文本等。
跨平台兼容： 可在大多数现代 Web 浏览器中工作，包括 Chrome、Firefox 和 Safari。

如何使用 File-Saver？

以下是在 Vue 应用程序中使用 File-Saver 库的分步指南：

1. 安装 File-Saver 库

使用 npm 安装库：

npm install file-saver --save

2. 导入 File-Saver 库

在您的 Vue 组件中，导入库：

import { saveAs } from 'file-saver';

3. 创建 Blob 对象

Blob 对象包含要导出的文件数据：

const blob = new Blob([数据], { type: '文件类型' });

其中：

数据： 要导出的文件数据。
文件类型： 文件类型，例如 "image/png" 或 "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"。

4. 导出文件

使用 saveAs 函数导出文件：

saveAs(blob, '文件名.文件类型');

代码示例：导出 Excel 文件

以下代码示例展示了如何使用 File-Saver 导出 Excel 文件：

import { saveAs } from 'file-saver';

const data = [
  ['姓名', '年龄'],
  ['张三', 20],
  ['李四', 30],
  ['王五', 40],
];

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'sheet1');

const blob = new Blob([XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, '导出.xlsx');