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

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




在上述示例中,我们使用 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, '订单');

你可能感兴趣的:(开发DEMO,vue3.2,插件/工具,vue.js,前端,javascript)