在 Vue 3 中读取 Excel 文件并将其内容转换为 JSON 格式，你可以使用一些第三方库，比如 xlsx 和 file-saver。下面我们使用xlsx来做简单示例。 [TOC] ### 安装依赖 ``` 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) } } ```