Vue3问题：如何将el-table导出为Excel表格？五个注意点要知道！-51CTO.COM

大家好，我是大澈！

今天分享一个开发中比较常见的问题，如何导出表格。

可以这么说，只要页面上有表格出现的地方，你就要做好实现导出功能的打算，因为你永远不知道客户要拿表格去做什么。

一、需求分析

1、需求

点击红色导出按钮，将下方表格的内容，导出为Excel文档。

2、问题

xlsx库和file-saver库各自的作用
使用时的注意点
XLSX.utils.table_to_book和XLSX.write的作用

二、需求实现速览

1、安装依赖

npm install --save xlsx
npm install --save file-saver

2、编写导出Excel的公共方法

在公共方法文件utils.js中，放入如下代码。

其中，exportExcel方法接受两个参数，name是生成excel的文件名，tableName是表格的id。

// 导入依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

/**
* 导出Excel表格
* @param name 生成excel的文件名，如：interestTable.xlsx
* @param tableName 表格的id，如：#tableId
* */
export const exportExcel = (name, tableName) => {
let sel = XLSX.utils.table_to_book(document.querySelector(tableName))
let selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {
FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, selIn)
}

return selIn
}

3、导入使用公共方法

<!-- 导出按钮 -->
<el-button @click="exportExcel('interestTable.xlsx', '#tableId')">导出</el-button>

<!-- 表格 -->
<el-table id="tableId" :data="tableData" border style="width: 100%"></el-table>

// 导入指定公共方法
import { exportExcel } from "@/common/utils";

三、问题答案详解

1、xlsx库和file-saver库各自的作用

（1）xlsx库

xlsx是一个流行的JavaScript库，用于在浏览器中读取、解析和生成Excel文件。它支持多种Excel文件格式，包括XLSX、XLS、CSV和ODS。你可以使用xlsx库来创建、修改和操作工作簿、工作表、单元格等Excel文件中的元素。

（2）file-saver库

file-saver是一个用于在浏览器中保存文件的JavaScript库。它提供了一个简单的API，可以将数据保存为文件，并将其下载到用户的本地计算机。file-saver库通过创建一个Blob对象并触发浏览器的文件下载功能来实现文件保存。

2、使用时的注意点

（1）浏览器兼容性

xlsx、file-saver库依赖浏览器的Blob和FileSaver功能。大多数现代浏览器都支持这些功能，但是在某些旧版本或特定的移动浏览器中可能不被支持。在使用前，请确保目标浏览器支持Blob和FileSaver。

（2）数据格式

确保将数据正确转换为适合xlsx库的格式。xlsx库支持多种数据源，如JSON、数组和HTML表格。根据你的数据源，使用适当的方法将其转换为工作表的格式。

（3）文件格式和选项

xlsx库支持多种Excel文件格式，如XLSX、XLS、CSV和ODS。在使用XLSX.write函数时，可以设置不同的选项来指定生成的文件类型、样式、图表等。查阅xlsx库的文档以了解更多选项和配置信息。

（4）大数据量处理

如果你要处理大量数据，尤其是在较旧或性能较低的设备上，可能会遇到性能问题。在这种情况下，你可以考虑使用流式处理或分页加载数据，以避免内存消耗过大。

（5）错误处理

在使用xlsx、file-saver库时，要注意正确处理可能出现的错误。例如，如果数据转换失败、保存文件失败或浏览器不支持所需功能，需要捕获和处理这些错误，并提供适当的反馈给用户。

3、XLSX.utils.table_to_book和XLSX.write的作用

（1）XLSX.utils.table_to_book

XLSX.utils.table_to_book是xlsx库中的一个函数，它的作用是将HTML表格转换为Workbook对象。

在Excel文件中，Workbook是最高级别的对象，它包含了多个工作表（Worksheets）以及其他Excel文件的元数据。table_to_book函数的作用是将一个指定的HTML表格转换为Workbook对象，以便进一步操作和处理。

具体来说，table_to_book函数将HTML表格的内容和结构解析为Workbook对象的结构。它会将表格的每一行转换为工作表（Worksheet）中的行，将表格的每一列转换为工作表中的列，并将单元格的内容、样式等信息保存在对应的位置上。

（2）XLSX.write

XLSX.write是xlsx库中的一个函数，它的作用是将Workbook对象转换为Excel文件的二进制数据或文件流。

在Excel文件处理中，Workbook是最高级别的对象，它包含了多个工作表（Worksheets）以及其他Excel文件的元数据。XLSX.write函数的作用是将给定的Workbook对象转换为Excel文件的二进制数据，以便保存到本地或进行其他处理。

具体来说，XLSX.write函数接受两个参数：

workbook：要转换为Excel文件的Workbook对象，它包含了要保存的数据、工作表结构、样式和其他元数据。
options：一个可选的配置对象，用于指定转换的选项，如文件类型（例如XLSX、CSV）、文件的输出格式（例如ArrayBuffer、BinaryString、Blob等）以及其他设置。默认选项为{ type: 'array', bookType: 'xlsx' }，表示将Workbook对象转换为XLSX格式的二进制数据数组。