当使用 Element UI 的 el-upload 组件上传 Excel 文件时，您可以使用 exceljs 库将上传的 Excel 数据转换为 JSON 格式。以下是一个示例代码，演示了如何在 Vue 项目中实现这一功能：
<template><el-uploadclass="upload-demo"action="/upload":on-success="handleSuccess":before-upload="beforeUpload"><el-button size="small" type="primary">点击上传</el-button></el-upload>
</template><script>
import ExcelJS from 'exceljs';export default {methods: {async handleSuccess(response, file, fileList) {// 读取上传的Excel文件const workbook = new ExcelJS.Workbook();await workbook.xlsx.load(file.raw);// 定义一个数组来存储JSON格式的数据const jsonData = [];// 获取第一个工作表const worksheet = workbook.getWorksheet(1);// 读取数据并转换为JSON格式worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) {if (rowNumber !== 1) { // 排除表头行let rowData = {};row.eachCell({ includeEmpty: true }, function(cell, colNumber) {// 使用单元格的列号作为JSON对象的键rowData[colNumber] = cell.value;});jsonData.push(rowData);}});// 输出JSON数据console.log(jsonData);},beforeUpload(file) {const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';if (!isExcel) {this.$message.error('只能上传xlsx格式的文件');}return isExcel;},},
};
</script>
在上述示例中，我们使用 el-upload 组件来实现文件上传功能，并使用 exceljs 库将上传的 Excel 文件转换为 JSON 格式的数据。在 handleSuccess 方法中，我们使用 ExcelJS 的 Workbook 类来加载上传的文件，并将其转换为 JSON 格式的数据。最后，我们将转换后的 JSON 数据输出到控制台。
// utils exceljsExport.ts文件
import moment from 'moment';export const exportToExcel = (exportDataList: any, getExcelColumns: any, name: any) => {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1'); worksheet.columns = getExcelColumns();worksheet.addRows(exportDataList);const time = moment().format('YYYYMMDDHHmmss');workbook.xlsx.writeBuffer().then((buffer) => {let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',});saveAs(blob, `${name}_${time}.xlsx`);});
};// vue文件
const getExcelColumns = () => {const exportAddColumns = [{ prop: 'startTime', label: '开始充电时间' },{ prop: 'phoneNumber', label: '手机号' },{ prop: 'cmsOrderId', label: '订单编号' },{ prop: 'status', label: '订单状态' }];return exportAddColumns.map((item) => {let items = {header: item.label, key: item.prop};return items;});};exportToExcel(exportDataList, getExcelColumns, '订单');
