通过 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 小时前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
r i c k5 小时前
Excel表----VLOOKUP函数实现两表的姓名、身份证号码、银行卡号核对
excel
枫,为落叶12 小时前
【vue】导出excel
前端·vue.js·excel
星空的资源小屋13 小时前
RoboIntern,一款自动化办公小助手
运维·人工智能·pdf·自动化·电脑·excel
会飞的小菠菜1 天前
大量Excel工作簿中的图片怎么批量提取出来
excel·导出·图片·提取·批量·保存·另存为
nongcunqq1 天前
abap 操作 excel
java·数据库·excel
CodeCraft Studio1 天前
国产化Excel开发组件Spire.XLS教程:将Python列表转换为Excel表格(3种实用场景)
开发语言·python·excel·spire.xls·python列表转excel·国产化文档开发
企鹅侠客1 天前
基于python写的PDF表格提取到excel文档
python·pdf·excel·pdf文档表格转excel
忘忧记1 天前
Excel VLOOKUP函数完全教程:从基础到高级实战
excel
葡萄城技术团队1 天前
突破Excel局限!SpreadJS让电子表格“活”起来
java·数据库·excel