前端读取excel文件中的数据--前端自定义导入数据

1. 安装依赖

首先安装 xlsx 库：

npm install xlsx
# 或
yarn add xlsx

2. 基础实现代码

方案 1：通过  上传并读取

方案 2：拖拽上传（更友好）

3. 高级功能

自定义数据处理

// 读取时指定表头（假设第一行是标题）
const options = { header: 1 }; // 或 { header: ["列1", "列2"] }
const jsonData = XLSX.utils.sheet_to_json(worksheet, options);

读取多个工作表

workbook.SheetNames.forEach(sheetName => {
  const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
  console.log(sheetName, sheetData);
});

 写入Excel（导出）

 

const newWorkbook = XLSX.utils.book_new();
const newWorksheet = XLSX.utils.json_to_sheet([
  { name: "张三", age: 20 },
  { name: "李四", age: 25 }
]);
XLSX.utils.book_append_sheet(newWorkbook, newWorksheet, "Sheet1");
XLSX.writeFile(newWorkbook, "导出数据.xlsx");

4. 注意事项

1. 文件类型兼容性：

   • 支持 .xlsx、.xls、.csv。

2. 大文件处理：

   • 如果文件很大（>10MB），建议分片读取或使用 Web Worker 避免页面卡顿。

3. 安全过滤：

   • 对读取的数据做校验，避免恶意文件攻击。

4. 移动端适配：

   • 部分安卓设备可能需额外处理文件类型。

实例：

获取excel表头

getExcelTitle(file).then(async title => {
    // 判断是否有重复表头
    if (new Set(title).size !== title.length) {
      message.error('提交表格时，请确保表头唯一，严禁重复。');
      loading.value = false;
    } else if (props?.isWebImport) {
      await readExcel(file, title);
    } else {
      excelFile.value = file;
      fileName.value = file.name;
      status.value = MODAL_STATUS.MATCH_FORM;
      excelTitles.value = title;
      getColumnSchemeList();
    }
  }).catch(e => {
    console.log(e);
    message.error('文件解析失败，可能已被加密或格式不受支持，请检查后重试。');
  }).finally(() => {
    loading.value = false;
  });

读取excel的数据 

async function readExcel(file, importTitle) {
  excelData.value = [];
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.load(file).then(res => {
    const worksheet = workbook.worksheets[0];
    if (worksheet.rowCount - 1 > 1000) {
      message.error('一次导入不能大于1000条记录。');
      loading.value = false;
    } else {
      status.value = MODAL_STATUS.MATCH_FORM;
      excelFile.value = file;
      fileName.value = file.name;
      status.value = MODAL_STATUS.MATCH_FORM;
      excelTitles.value = importTitle;
      // 获取模版列表
      // getColumnSchemeList();
      worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
        const rowData = [];
        for (let i = 0; i < importTitle.length; i++) {
          const cell = row.getCell(i + 1);
          if (cell.type === ExcelJS.ValueType.Formula) {
            rowData.push(cell.result);
          } else if (cell.type === ExcelJS.ValueType.RichText) {
            rowData.push((cell.value.richText || []).map(v => v.text).join(''));
          } else if (cell.type === ExcelJS.ValueType.Hyperlink) {
            rowData.push(cell.value.text);
          } else if (cell.type === ExcelJS.ValueType.Null) {
            rowData.push('');
          } else if (cell.type === ExcelJS.ValueType.Error) {
            rowData.push(cell.value.error);
          } else if (cell.type === ExcelJS.ValueType.Date && cell.value) {
            rowData.push(dayjs.utc(cell.value).format('YYYY-MM-DD HH:mm:ss'));
          } else {
            rowData.push(cell.value);
          }
        }
        excelData.value.push(rowData);
      });
    }
  });
}