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,}
}
功能详解
参数说明
tableData：需要导出的表格数据，是一个Vue的ref响应式对象columns：表头配置对象，格式为{[表头key]: [表头名称]}- 配置选项：
fileName：导出的文件名，默认为"test"sheetName：Excel工作表名称，默认为"Sheet1"fileType：文件类型，支持多种格式，默认为"xlsx"
实现步骤
-
数据预处理：
- 首先获取表头的键名
- 根据表头配置过滤数据，只保留需要的字段，并将键名转换为配置的表头名称
-
创建工作簿和工作表：
- 使用
XLSX.utils.book_new()创建一个新的工作簿 - 使用
XLSX.utils.json_to_sheet()将处理后的数据转换为工作表
- 使用
-
组装Excel文件：
- 将工作表添加到工作簿中
- 使用
XLSX.write()生成Excel文件的二进制数据
-
文件下载：
- 创建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>
优点
- 封装良好：将复杂的Excel导出逻辑封装在一个Hook中，使用简单
- 配置灵活：支持自定义文件名、工作表名和文件格式
- 表头映射：可以通过columns参数灵活配置表头显示名称
- 类型安全：支持多种Excel文件格式
扩展建议
- 添加样式支持：可以扩展功能，支持单元格样式、合并单元格等高级特性
- 大数据量优化：对于大数据量导出，可以考虑分片处理或使用Web Worker
- 国际化支持：可以根据需要添加多语言支持
- 进度提示：对于大量数据导出，可以添加导出进度提示
总结
通过xlsx和file-saver的组合，我们可以轻松实现前端Excel导出功能。本文介绍的useExcel Hook提供了一种简洁、可复用的解决方案，可以快速集成到Vue项目中，满足大多数导出需求。
对于更复杂的需求，可以基于这个Hook进行扩展，或者直接使用xlsx库提供的更多高级功能。