Vue3 中使用 XLSX 处理 Excel 文件完整指南

一、简介

在实际项目开发中，Excel 文件的导入导出是一个非常常见的需求。本文将介绍如何在 Vue3 项目中使用 xlsx 库来实现 Excel 文件的上传、预览、导出等功能。

二、环境准备

1. 安装依赖

首先需要安装 xlsx 库：

npm install xlsx
# 或者使用 yarn
yarn add xlsx

2. 引入相关依赖

在组件中，我们需要引入以下依赖：

import * as XLSX from 'xlsx'

三、功能实现

1. 基础页面结构

我们的页面主要包含三个部分：

• Excel 文件上传区域

• 数据预览表格

• 操作按钮（导出数据、下载模板）

2. Excel 文件上传

<el-upload
  drag
  action="#"
  :auto-upload="false"
  :on-change="handleFileChange"
  accept=".xlsx,.xls">
  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  <div class="el-upload__text">
    将Excel文件拖到此处，或<em>点击上传</em>
  </div>
</el-upload>

上传功能的核心代码：

const handleFileChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      // 读取文件数据
      const data = e.target.result
      // 解析Excel文件
      const workbook = XLSX.read(data, { type: 'array' })
      // 获取第一个工作表
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
      // 转换为JSON数据
      const jsonData = XLSX.utils.sheet_to_json(firstSheet)
      
      if (jsonData.length > 0) {
        // 更新表格数据和列
        tableData.value = jsonData
        tableColumns.value = Object.keys(jsonData[0])
        
        // 向服务器提交数据
        submitToServer(jsonData)
        
        ElMessage.success('Excel导入成功')
      } else {
        ElMessage.warning('Excel文件为空')
      }
    } catch (error) {
      console.error('Excel解析错误:', error)
      ElMessage.error('Excel解析失败')
    }
  }
  reader.readAsArrayBuffer(file.raw)
}

// 模拟向服务器提交数据
const submitToServer = (data) => {
  console.log('向服务器提交的数据：', data)
  // 实际项目中这里应该是一个 API 请求
  // const response = await axios.post('/api/excel/upload', data)
  setTimeout(() => {
    console.log('服务器处理完成')
  }, 1000)
}

3. 数据预览

<el-table :data="tableData" border style="width: 100%">
  <el-table-column
    v-for="(col, index) in tableColumns"
    :key="index"
    :prop="col"
    :label="col"
    :min-width="120">
  </el-table-column>
</el-table>

4. 导出 Excel

const exportExcel = () => {
  try {
    // 将JSON数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(tableData.value)
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
    // 导出文件
    XLSX.writeFile(workbook, "导出数据.xlsx")
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出错误:', error)
    ElMessage.error('导出失败')
  }
}

5. 导出模板

const exportTemplate = () => {
  try {
    // 创建模板数据
    const template = [
      {
        '姓名': '张三',
        '年龄': 25,
        '职位': '工程师',
        '入职日期': '2023-01-01'
      }
    ]
    const worksheet = XLSX.utils.json_to_sheet(template)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, "Template")
    XLSX.writeFile(workbook, "导入模板.xlsx")
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板导出错误:', error)
    ElMessage.error('模板导出失败')
  }
}

四、使用说明

······上传 Excel：

• 点击上传区域或将文件拖拽到上传区域

• 支持 .xlsx 和 .xls 格式的文件

• 上传后会自动解析并显示数据预览
• 数据预览：
• 上传成功后会在表格中显示 Excel 文件的内容
• 表格会自动根据 Excel 的列头生成对应的列
• 导出数据：
• 点击"导出 Excel"按钮可以将当前表格数据导出为 Excel 文件
• 导出的文件名为"导出数据.xlsx"
• 下载模板：
• 点击"下载模板"按钮可以下载一个包含示例数据的模板文件
• 用户可以参照模板格式准备导入数据