通过 xlsx 解析上传excel的数据

一、前言

在前端开发中,特别是在后台管理系统中,导入数据(上传excel)到后端是是否常见的功能;而一般的实现方式都是通过接口将excel上传到后端,再有后端进行数据解析并做后续操作。

今天,来记录一下前端通过 xlsx 直接解析得到数据。

二、安装依赖

bash 复制代码
npm i XLSX --save

三、上传文件解析数据

javascript 复制代码
<template>
  <div>
    <!-- 不自动上传,不显示上传的列表,只能上传一个 -->
    <el-upload
      ref="xlsxUploadRef"
      action=""
      :show-file-list="false"
      :auto-upload="false"
      :on-change="onChange"
      accept=".xls,.xlsx"
      :limit="1"
    >
      <!-- 自定义按钮 -->
      <slot></slot>
    </el-upload>

  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  name: 'ResolveExcel',
  props: {
    fileType: { // 数据表类型
      type: Number,
      default: 1
    }
  },
  methods: {
    readFile(file) {
      return new Promise((resolve) => {
        const reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = (ev) => {
          resolve(ev.target.result)
        }
      })
    },
    async onChange(file) {
      // 格式检验
      if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        this.$modal.msgError('上传格式不正确,请上传xls或者xlsx格式')
        return false
      }

      const dataBinary = await this.readFile(file.raw)
      const workBook = XLSX.read(dataBinary, {
        type: 'binary',
        cellDates: true
      })
      const workSheet = workBook.Sheets[workBook.SheetNames[0]]
      const data = XLSX.utils.sheet_to_json(workSheet)
      console.log('XLSX数据', data) // excel 中没事数据是,data = []

      // 格式化数据, 并将数据回传;formatData 方法需要根据excel内的数据进行开发;此处并没有实现,实现开发中,该方法可能在父组件实现(多个地方使用,表格内容不一致,无法共用)
      const resultArr = this.formatData(data)
      this.$emit('getXlsxData', resultArr);

      this.$nextTick(() => { // 数据拿到后,清空上传列表,才能继续上传解析
        this.$refs.xlsxUploadRef.clearFiles();
      })
    }
  }
}
</script>

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

相关推荐
掘金詹姆斯3 小时前
EasyExcel实现统计结果导出导入
java·excel
家庭云计算专家3 小时前
ONLYOFFICE深度解锁系列.2-Excel 跨文件数据整合实战指南-可道云的另一个严重bug
云计算·编辑器·bug·excel
云只上3 小时前
PDF转excel+json ,vue3+SpringBoot在线演示+附带源码
前端·javascript·spring boot·后端·pdf·json·excel
小行星1255 小时前
前端根据后端返回的excel二进制文件流进行导出下载
前端·excel
咕噜咕噜啦啦14 小时前
使用EXCEL绘制平滑曲线
excel·政务
CodeJourney.1 天前
DeepSeek与ECharts融合助力复杂图表高效制作
数据库·人工智能·算法·excel
CodeJourney.1 天前
DeepSeek与Napkin:信息可视化领域的创新利器
数据库·人工智能·算法·excel·流程图
Python大数据分析@2 天前
Pandas取代Excel?
excel·pandas
开开心心就好2 天前
实用电脑工具,轻松实现定时操作
python·学习·pdf·电脑·word·excel·生活
Eiceblue2 天前
通过C# 将Excel表格转换为图片(JPG/ PNG)
visualstudio·c#·.net·excel