vue3 读取excel 文件内容 返回json。vue3 导入excel

在 Vue 3 中读取 Excel 文件并将其内容转换为 JSON 格式，你可以使用一些第三方库，比如 xlsx 和 file-saver。下面我们使用xlsx来做简单示例。

安装依赖

npm install xlsx
或者
cnpm install xlsx

读取excel 直接获取整个excel的json数据

<template>
    <el-button type="success" :icon="Plus" size="default" @click="openChoiseFile">导入 </el-button>
    <input type="file" ref="fileInut" style="visibility: hidden" @change="handleFileUpload" />
</template>
<script setup lang="ts" name="certificateUser">
    const fileInut = ref(null);
    const openChoiseFile = () =>{
         // 触发input的点击事件,触发文件选择的事件
        fileInut.value.click()
    }
    const jsonData = ref(null);
    const handleFileUpload = (event:any) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e:any) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          // 假设我们只读取第一个工作表
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
          jsonData.value = JSON.stringify(json, null, 2);
          console.log("看看获取的json数据",jsonData.value)
        };
        reader.readAsArrayBuffer(file);
      }
    };
</script>

循环解析一次性返回的json数据，根据需求自己来组装数据，以及每行的为空验证

const jsonData = ref([]); // 用于存储最终组装好的 JSON 数据
const formattedJsonData = ref(''); // 用于显示格式化的 JSON 数据(JSON字符串形式)
const handleFileUpload = (event:any) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e:any) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      // 假设我们只读取第一个工作表
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' }); // 使用 defval 来处理空单元格
      console.log("看看所有数据...",rows)
      // 创建一个新数组来存储非空行
      const nonEmptyRows = [] as any;
      rows.forEach((row:any, rowIndex) => {
        // 跳过标题行（如果有的话）
        if (rowIndex === 0) return;
        // 创建一个新对象来存储当前行的数据
        const rowData = {} as any;
        let allEmpty = true; // 标记当前行是否全部为空
        Object.keys(row).forEach((key, colIndex) => {
          // 跳过第一列（通常是索引列或标题列）
          // if (colIndex === 0) return;
          // 检查单元格是否为空（考虑空字符串和 undefined）
          if (row[key] !== '' && row[key] !== undefined) {
            allEmpty = false; // 如果有一个非空单元格，则标记为 false
            rowData[key] = row[key]; // 将非空单元格的数据添加到对象中
          }
        });
        // 如果当前行不是全部为空，则添加到非空行数组中
        if (!allEmpty) {
          nonEmptyRows.push(rowData);
        }
      });
      // 更新响应式变量
      jsonData.value = nonEmptyRows;
      formattedJsonData.value = JSON.stringify(nonEmptyRows, null, 2);
      console.log("看看组装的json数据",jsonData.value)
      // console.log("看看json字符串数据",formattedJsonData.value)
    };
    reader.readAsArrayBuffer(file);
  }
};

解析成有属性名称的json对象数组

增加一个映射关系即可。代码如下：

// 导入的时候读取excel里边的映射关系
const mappingData = reactive({
    // 培训任务证书
    trainingTask: {
        0: 'UserName',
        1: 'IDCARD',
        2: 'TrainingProgramName',
        3: 'TrainingSubProgramName',
        4: 'CertificateTemplateId'
    } as any,
    // 培训项目证书(只有大项目没有子任务的)
    trainingProgram: {}
})
const fileInut = ref(null)
const openChoiseFile = () => {
    fileInut.value.click()
}
const jsonData = ref([]) // 用于存储最终组装好的 JSON 数据
const formattedJsonData = ref('') // 用于显示格式化的 JSON 数据(JSON字符串形式)
const handleFileUpload = (event: any) => {
    const file = event.target.files[0]
    if (file) {
        const reader = new FileReader()
        reader.onload = (e: any) => {
            const data = new Uint8Array(e.target.result)
            const workbook = XLSX.read(data, { type: 'array' })
            // 假设我们只读取第一个工作表
            const firstSheetName = workbook.SheetNames[0]
            const worksheet = workbook.Sheets[firstSheetName]
            const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' }) // 使用 defval 来处理空单元格
            // 创建一个新数组来存储非空行
            const nonEmptyRows = [] as any
            rows.forEach((row: any, rowIndex) => {
                // 跳过标题行（如果有的话）
                if (rowIndex === 0) return
                // 创建一个新对象来存储当前行的数据
                const rowData = {} as any
                let allEmpty = true // 标记当前行是否全部为空
                Object.keys(row).forEach((key, colIndex) => {
                    // 跳过第一列（通常是索引列或标题列）
                    // if (colIndex === 0) return;
                    // 检查单元格是否为空（考虑空字符串和 undefined）
                    if (row[key] !== '' && row[key] !== undefined) {
                        allEmpty = false // 如果有一个非空单元格，则标记为 false
                        rowData[mappingData.trainingTask[key]] = row[key] // 将非空单元格的数据添加到对象中
                    } 
                })
                // 如果当前行不是全部为空，则添加到非空行数组中
                if (!allEmpty) {
                    nonEmptyRows.push(rowData)
                }
            })
            // 更新响应式变量
            jsonData.value = nonEmptyRows
            formattedJsonData.value = JSON.stringify(nonEmptyRows, null, 2)
            // console.log('看看组装的json数据', jsonData.value)
            console.log("看看json字符串数据",formattedJsonData.value)
        }
        reader.readAsArrayBuffer(file)
    }
}