exceljs读取el-upload上传的excle数据并转为json输出

当使用 Element UI 的 el-upload 组件上传 Excel 文件时，您可以使用 exceljs 库将上传的 Excel 数据转换为 JSON 格式。以下是一个示例代码，演示了如何在 Vue 项目中实现这一功能：

<template>
  <el-upload
    class="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, '订单');