web前端使用xlsx和file-saver实现前端表格table数据导出Excel功能

前言

在前端开发中，经常需要将前端页面显示的table表格数据导出为Excel文件。本文将介绍如何使用xlsx和file-saver这两个库来实现一个简单易用的Excel导出功能，并将其封装为可复用的Vue Composition API Hook。

技术栈

• xlsx：一个强大的电子表格处理库，支持读取、解析和编写多种电子表格格式
• file-saver：一个简单的文件保存解决方案，兼容大多数现代浏览器

实现代码解析

首先，我们来看完整的实现代码：

import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

/**
 * 导出Excel文件hooks
 * @Author ZhangJun
 * @param tableData 要导出的表格数据（需要双向绑定的ref）
 * @Date  2025/5/29 10:00
 * @param fileName 文件名
 * @param columns 表头配置:{[表头key]:[表头名称]}
 * @param sheetName 工作表名
 * @param fileType 文件类型（'xlsx' | 'xlsm' | 'xlsb' | 'xls' | 'xla' | 'biff8' | 'biff5' | 'biff2' | 'xlml' | 'ods' | 'fods' | 'csv' | 'txt' | 'sylk' | 'slk' | 'html' | 'dif' | 'rtf' | 'prn' | 'eth' | 'dbf'）
 * @constructor
 */
export const useExcel = (tableData = [], columns = {}, { fileName = 'test', sheetName = 'Sheet1', fileType = 'xlsx' }) => {
  // 导出 Excel 文件
  const exportExcel = () => {
    // 获取表头的键名
    const headers_keys = Object.keys(columns)
    //按表头过滤要下载的数据
    const excelData =
      tableData.value.map(record => {
        const obj = {}
        headers_keys.forEach(key => {
          const name = columns[key]
          obj[name] = record[key]
        })
        return obj
      }) || []

    // 创建工作簿
    const workbook = XLSX.utils.book_new()

    // 将表格数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(excelData)

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)

    // 生成 Excel 文件
    const excelBuffer = XLSX.write(workbook, {
      bookType: fileType, // 工作簿类型
      type: 'array', // 输出类型
    })

    // 创建 Blob 对象
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })

    // 保存文件
    saveAs(blob, `${fileName}.${fileType}`)
  }

  return {
    exportExcel,
  }
}

功能详解

参数说明

1. tableData：需要导出的表格数据，是一个Vue的ref响应式对象
2. columns：表头配置对象，格式为{[表头key]: [表头名称]}
3. 配置选项：
   • fileName：导出的文件名，默认为"test"
   • sheetName：Excel工作表名称，默认为"Sheet1"
   • fileType：文件类型，支持多种格式，默认为"xlsx"

实现步骤

1. 数据预处理：

   • 首先获取表头的键名
   • 根据表头配置过滤数据，只保留需要的字段，并将键名转换为配置的表头名称

2. 创建工作簿和工作表：

   • 使用XLSX.utils.book_new()创建一个新的工作簿
   • 使用XLSX.utils.json_to_sheet()将处理后的数据转换为工作表

3. 组装Excel文件：

   • 将工作表添加到工作簿中
   • 使用XLSX.write()生成Excel文件的二进制数据

4. 文件下载：

   • 创建Blob对象
   • 使用file-saver的saveAs方法触发文件下载

使用方法

在Vue组件中使用这个Hook非常简单：

import { ref } from 'vue'
import { useExcel } from './useExcel'

export default {
  setup() {
    const tableData = ref([
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 30 },
    ])
    
    const columns = {
      id: 'ID',
      name: '姓名',
      age: '年龄'
    }
    
    const { exportExcel } = useExcel(tableData, columns, {
      fileName: '用户数据',
      sheetName: '用户列表'
    })
    
    return {
      exportExcel
    }
  }
}

然后在模板中添加一个导出按钮：

<button @click="exportExcel">导出Excel</button>

优点

1. 封装良好：将复杂的Excel导出逻辑封装在一个Hook中，使用简单
2. 配置灵活：支持自定义文件名、工作表名和文件格式
3. 表头映射：可以通过columns参数灵活配置表头显示名称
4. 类型安全：支持多种Excel文件格式

扩展建议

1. 添加样式支持：可以扩展功能，支持单元格样式、合并单元格等高级特性
2. 大数据量优化：对于大数据量导出，可以考虑分片处理或使用Web Worker
3. 国际化支持：可以根据需要添加多语言支持
4. 进度提示：对于大量数据导出，可以添加导出进度提示

总结

通过xlsx和file-saver的组合，我们可以轻松实现前端Excel导出功能。本文介绍的useExcel Hook提供了一种简洁、可复用的解决方案，可以快速集成到Vue项目中，满足大多数导出需求。

对于更复杂的需求，可以基于这个Hook进行扩展，或者直接使用xlsx库提供的更多高级功能。