前言
【负责人 A】：现在报表部分基于接口的 Excel 的导入和导出功能有点慢，前端这边能不能实现一下这个功能，然后我们在比对看看效果！
【切图仔 B】： 接口这边不能优化一下吗？比如排查下慢的原因什么的。
【负责人 A】：现在后端开发任务比较重，处理的核心任务也多还会涉及一些架构上的调整，所以想着前端这边可以处理一下，然后看看整体效果。
【切图仔 B】： OK，试试 就 ~ Shi Shi ~
下面就基于 xlsx 这个第三方库封装一个 <ExcelUpload /> 组件实现表格导入，以及 json 数据导出 Excel 功能的 json2Excel() 工具方法。
选择
xlsx的原因如下图所示：
Excel 解析为 JSON
基本内容
组件效果和结构
组件内容是很简单的结构和视图，直接查看如下的页面效果和代码即可：
<template> <input type="file" ref="excelRef" :accept="props.accept" @change="onChange" class="excel" /> <h1>解析数据：</h1> <h2> <code>{{ excelData }}</code> </h2> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import * as XLSX from 'xlsx' interface Props { accept: string } const props = withDefaults(defineProps<Props>(), { accept: '.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', }) const excelRef: any = ref(null) const excelData: any[] = reactive([]) const onChange = (event: any) => { // 获取文件对象 const file = event.target.files[0] console.log(file) } </script> 复制代码
Excel 数据格式
Excel 数据格式有两种，一种是 有表头说明 的，另一种是 无表头说明 的，具体内容如下：
- 有表头说明
- 无表头说明
实现 Excel 转 JSON 功能
核心步骤
- 通过
FileReader以二进制的方式读取Excel文件，即fileReader.readAsBinaryString(file) - 将对应的二进制数据通过
XLSX.read(fileData, { type: "binary" })方法生成workbook对象 workbook.SheetNames[0]获取第一个Sheet的名称wsname，因为表格是有序列表，因此可以有多个Sheet
- 通过
XLSX.utils.sheet_to_json(workbook.Sheets[wsname])方法将对应的Sheet内容转换为JSON数据
效果演示
- 有表头说明
- 无表头说明
具体代码
// 读取对应表格文件 const readerExcel = (file: File) => { const fileReader = new FileReader(); // 以二进制的方式读取表格内容 fileReader.readAsBinaryString(file); // 表格内容读取完成 fileReader.onload = (event: any) => { try { const fileData = event.target.result; const workbook = XLSX.read(fileData, { type: "binary", }); // 表格是有序列表，因此可以取多个 Sheet，这里取第一个 Sheet const wsname = workbook.SheetNames[0]; // 将表格内容生成 json 数据 const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); console.log(sheetJson); // 得到的表格 JSON 内容 } catch (e) { console.log(e); return false; } }; }; // 文件变化时触发 const onChange = (event) => { // 获取文件对象 const file = event.target.files[0]; // 读取文件内容 readerExcel(file); // 清除数据 clearFile(); }; const clearFile = () => { excelRef.value.value = ""; }; 复制代码
格式化 JSON 数据
这里需要考虑 有表头说明 和 无表头说明 的情况，为了方便统一处理，作如下规定：
- 通过将 有表头说明 的数据格式统一转化为 无表头说明 的数据格式
- 统一将 无表头说明 的数据格式转化为标准的接口入参，即
{ key: value }，这里需要建立一个name -> key的映射关系：
const excelNameToKey = { '姓名': "name", '年龄': "age", '特长': "skill", '电话': "telephone", '地址': "address", }; 复制代码
格式化如下：
核心代码如下：
<script setup lang='ts'> import { reactive, ref } from "vue"; import * as XLSX from "xlsx"; const excelNameToKey = { 姓名: "name", 年龄: "age", 特长: "skill", 电话: "telephone", 地址: "address", }; interface Props { accept: string; } const props = withDefaults(defineProps<Props>(), { accept: ".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }); const excelRef: any = ref(null); const excelData: any[] = reactive([]); const clearFile = () => { excelRef.value.value = ""; }; // 标准化 JSON 数据 const excelDataToJson = (sheetJson: any[]) => { if (!sheetJson.length) return; let result = sheetJson; const hasTableHead = !!sheetJson[0].__EMPTY; // 拥有表头的数据，需要取正确的值 if (hasTableHead) { const header = sheetJson.shift(); const data: any[] = []; Object.keys(header).forEach((key) => { sheetJson.forEach((item, index) => { const obj = data[index] || {}; obj[header[key]] = item[key]; data[index] = obj; }); }); console.log("【】【】", data); result = data; } // 将表格对应的文字转换为 key result.forEach((item) => { const newItem: any = {}; Object.keys(item).forEach((key) => { newItem.title = key; newItem[excelNameToKey[key]] = item[key]; }); excelData.push(newItem); }); }; // 读取对应表格文件 const readerExcel = (file: File) => { const fileReader = new FileReader(); // 以二进制的方式读取表格内容 fileReader.readAsBinaryString(file); // 表格内容读取完成 fileReader.onload = (event: any) => { try { const fileData = event.target.result; const workbook = XLSX.read(fileData, { type: "binary", }); // 表格是有序列表，因此可以取多个 Sheet，这里取第一个 Sheet const wsname = workbook.SheetNames[0]; // 将表格内容生成 json 数据 const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); console.log(sheetJson); // 标准化 JSON 数据 excelDataToJson(sheetJson); } catch (e) { console.log(e); return false; } }; }; // 文件变化时触发 const onChange = (event) => { // 获取文件对象 const file = event.target.files[0]; // 读取文件内容 readerExcel(file); // 清除数据 clearFile(); }; </script>
