vue3导入xlsx表格处理数据进行渲染

【前端表格导入实现方案】使用XLSX插件实现Excel文件上传解析，通过Vue3的el-upload组件触发文件选择，核心步骤包括：1)读取二进制文件内容；2)用XLSX解析工作簿数据；3)转换Sheet为JSON格式；4)按业务规则处理数据（跳过首尾行，提取特定列构建对象数组）；5)将处理后的数据赋值给表单对象进行页面渲染。关键点在于通过FileReader异步读取文件，以及利用XLSX的she

白云~️

270人浏览 · 2025-06-17 18:13:04

白云~️ · 2025-06-17 18:13:04 发布

下载插件

npm install -S xlsx

import * as XLSX from "xlsx"; // Vue3 版本

<el-upload class="upload-demo"
            accept=".xlsx"
            :http-request="channel"
            :show-file-list="false"
            :limit="1"
          >
            <el-button type="primary">导入表格</el-button>
          </el-upload>

上传的表格文件格式

// 导入表格
async function channel(uploadFile: any) {
  // console.log(uploadFile)
  let file = uploadFile.file
  let dataBinary = await readFile(file);
  let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true })
  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
  const excelData = XLSX.utils.sheet_to_json(workSheet, { header: 1 })
  // console.log(excelData)
  Form.value.details = []
  // 处理数据核心，根据自己的数据格式进行修改
  excelData.forEach((item: any, index: number) => {
    if(index!=0&&index!=1&&index!=excelData.length-1){
      Form.value.details.push({
      summary: item[0],
      employee_no: item[1],
      amount: item[2],
      account_name: item[3],
      account_number: item[4],
      bank_name: item[5],
      notes: item[6],
    })
    }
  })
  Form.value.plan_name = excelData[0][0]
  Form.value.total_amount = excelData[excelData.length - 1][1]
  // console.log(Form.value.details)
  Dialog.value = true
}
const readFile = (file) => {
  return new Promise((resolve) => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = (ev) => {
      resolve(ev.target?.result)
    }
  })
}

导入的表格数据

简析出来的数据

渲染到页面

导入数据进行渲染的核心是处理得到的数据改为渲染的数组对象格式

以下是处理其他数据的参考

找到数据规律进行处理

  let indexX = 1
  paymentForm.value.details.map((item1: any, i1: number) => {
    return item1.child.map((item2: any, i2: number) => {
      indexX++
      let indexY = 2
      return item2.detail.map((item3: any, i3: number) => {
        return item3.data.map((item4: any, i4: number) => {
          indexY++
          item4.amonut = excelData[indexY][indexX]
          return item4
        })
      })
    })
  })

vue3 导出表格，合并单元格，设置单元格宽度，文字居中，修改文字颜色-CSDN博客