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

笔者 | 大澈

大家好，我是大澈！

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

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

I、需求分析

一、需求

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

二、问题

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

2、使用时的注意点

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

II、需求实现速览

一、安装依赖

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

二、编写导出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
}

三、导入使用公共方法

<!--  导出按钮  -->
<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";

III、问题答案详解

一、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对象并触发浏览器的文件下载功能来实现文件保存。

二、使用时的注意点

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

三、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格式的二进制数据数组。

IV、结语

一、进问答群的作用

1、及时解决你在学习和工作中的难题，提高效率。

2、认识更多志同道合的朋友或老师，共同进步。

3、生活心情烦闷时，给自己一个倾诉的港口。

二、建立这个平台的初衷

1、打造一个问答平台，一个仅包含前端问题的平台，让大家可以高效处理同样问题。

2、通过不断积累问题，去练习大家的个人逻辑思维，并顺便学习相关的知识点。

3、遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

- END -