Element-ui Table表格导出功能的实现

心安事随

发布于 2024-07-29 17:17:13

1870

发布于 2024-07-29 17:17:13

文章被收录于专栏：前端大合集

1. 效果

2. 需要的库

我们这里需要用到两个库:

FileSaver:

FileSaver 是一个用于在浏览器中保存文件的 JavaScript 库。
它提供了一种简单的方式来将数据保存为文件并下载到用户的计算机上。
FileSaver 支持保存各种类型的文件，包括文本文件、图像文件、PDF 文件等。
它是一个独立的库，不依赖于其他第三方库。

XLSX:

XLSX 是一个用于读取、解析和生成 Excel 文件的 JavaScript 库。
它可以处理各种 Excel 文件格式，包括 .xls 和 .xlsx 等。
XLSX 提供了一组功能强大的 API，使您能够读取和修改 Excel 文件的内容、样式和格式。
它是一个独立的库，不依赖于其他第三方库。

3. 安装

npm install file-saver xlsx

4. 导出表格

表格导出的主要代码

<el-button color="#4b5cc4" :icon="Download" @click="exportExcel">导出为Excel</el-button>


<!-- 表格 -->
<div class="table">
     <el-table :data="productManagerInfo" border style="width: 100%" id="productTable">
                <!-- 索引 -->
          <el-table-column type="index" label="id" />
          <el-table-column prop="account" label="账号" />

          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="identity" label="身份" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column label="操作" width="200">
          <!-- 编辑 -->
          <template #default="scope"> <!-- 作用域插槽 -->
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- 删除 -->
                     <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
         </el-table-column>
         
     </el-table>
</div>

import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
// 导出表格按钮点击后触发的事件
const exportExcel = () => {
    /* 从表生成工作簿对象 */
    var wb = XLSX.utils.table_to_book(document.querySelector("#productTable"));

    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
    });

    try {
        // 使用 FileSaver 将二进制数据保存为文件
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            // 设置导出文件名称
            "product.xlsx"
        );
    } catch (e) {
        // 处理异常，例如在不支持 Blob 或 FileSaver 的情况下
        if (typeof console !== "undefined") console.log(e, wbout);
    }

    // 返回二进制字符串（可选，根据实际需求）
    return wbout;
}

5. api说明

讲解一下代码里面用到的api:

XLSX.utils.table_to_book： 这个函数从一个HTML表格中生成一个工作簿对象（Workbook）。document.querySelector("#productTable") 选择了具有 id 为 productTable 的表格元素。
XLSX.write： 这个函数将工作簿对象转换为二进制字符串。 bookType: "xlsx" 指定了导出的文件类型为 Excel 文件 type: "array" 表示输出的数据格式为数组。
FileSaver.saveAs： 这里使用 FileSaver.js 库将二进制数据保存为文件。 Blob([wbout], { type: "application/octet-stream" }) 创建一个 Blob 对象，表示二进制数据，并设置其 MIME 类型为 "application/octet-stream"，这是一个通用的二进制文件类型. FileSaver.saveAs 函数将这个 Blob 对象保存为文件，其中第二个参数为文件名，这里设置为 "product.xlsx"。
try catch： 在尝试保存文件时，可能会出现异常，例如在不支持 Blob 或 FileSaver 的浏览器中。异常会被捕获，并在控制台中记录。