位置: IT常识 - 正文

前端使用xlsx插件读取excel文件数据(保姆级教程)(前端从后端拿excel文件)

编辑:rootadmin
前端使用xlsx插件读取excel文件数据(保姆级教程)

推荐整理分享前端使用xlsx插件读取excel文件数据(保姆级教程)(前端从后端拿excel文件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端 excel,前端操作excel,前端 excel,前端导入excel文件,前端表格插件哪个好,前端导入excel文件,ext前端,前端展示excel数据,内容如对您有帮助,希望把文章链接给更多的朋友!

本人属于一个实习菜鸟,大神请谨慎阅读............

      在开发过程中,难免会碰到用前端来处理excel文件的需求,我们需要解析出excel文件的内容然后在以对象的形式展示或者与后端对接

功能的实现思路:

     文件选择   =>  FileReader对象得到二进制数据  =>  XLSX处理二进制数据 => 得到数据

1.导入按钮的样式与事件(element ui)

        首先我们需要的是一个导入的按钮但是我们导入按钮并不好处理触发选择文件(file)的change事件所以我们可以用定位来解决这个问题,原理就是:选择文件按钮(file)覆盖在正常按钮上面然后在把选择文件按钮(file)透明的变为0即可

<el-button size="mini" type="success" style="margin-top: 10px" :disabled="disabled"class="el-dialog-position"> <span v-if="importStatus === false"> 导入<i class="el-icon-upload el-icon--right" /> <input ref="files" type="file" v-if="!disabled" class="excelFile" @change="excelFileMethod" /> </span> <span v-if="importStatus === true"> 导入中<i class="el-icon-loading el-icon--right" /> </span></el-button>

        接下来就是chnage事件了,当用户更改 input、select 和textarea元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。我们选择文件并确认以后得到了下面着一些大堆数据

这一大堆的数据我们不用管,我们只关注target对象里面的files对象就可以了因为等一下我们需要用到,但是注意这里的只是文件的信息并不是数据更不是二进制文件!!!!!!

2.对得到的文件信息进行处理(fileReader的使用)

        先对fileReader做个介绍,FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。(官网原文)这里给你们个地址自己去看属性和方法的使用我就不做过多的介绍了.........先看代码:

// change事件excelFileMethod(e) { var _this = this// excel文件信息const files = e.target.filesconsole.log(files);// 构建fileReader对象const fileReader = new FileReader()// 读取操作完成时fileReader.onload = function(e) {try {// 二进制数据console.log(e.target.result)} catch (e) {console.log('文件类型不正确')return}}// 读取指定文件内容fileReader.readAsBinaryString(files[0])}第一步我们需要构建一个新的FileReader对象第二步使用FileReader.readAsBinaryString()读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。第三步就是FileReader.onLoad该事件在读取操作完成时触发。3.对得到的二进制数据进行处理(XLSX插件的使用)

        XLSX插件的使用,使用前我们需要下载并CND使用也可以是npm安装看个人需求,我这里是vue项目所以就是npm安装了然后还需要我们引入XLSX,方法如下:

import XLSX from 'xlsx'

前端使用xlsx插件读取excel文件数据(保姆级教程)(前端从后端拿excel文件)

通过上面的代码我们已经得到了二进制数据了,我们就开始对二进制数据进行解析吧!使用XLSX.read(data, { type: type})方法来实现,type主要取值如下:

base64:以base64方式读取binary:BinaryString格式( byte n is data.charCodeAt(n) )string:UTF8编码的字符串buffer:nodejs Bufferarray:Uint8Array,8位无符号数组file:文件的路径(仅nodejs下支持)

这个方法返回一个workBook对象,对象的内容如下:

可以看到workBook对象,sheetNames里面保存了所有的sheet名字,然后Sheets则保存了每个sheet的具体内容(我们称之为Sheet Object)。每一个sheet是通过类似A1这样的键值保存每个单元格的内容,我们称之为单元格对象(Cell Object)

解析workBook对象的方法XLSX.utils.sheet_to_csv:生成CSV格式XLSX.utils.sheet_to_txt:生成纯文本格式XLSX.utils.sheet_to_html:生成HTML格式XLSX.utils.sheet_to_json:输出JSON格式

这里用到的是XLSX.utils.sheet_to_json所以我着重介绍,XLSX.utils.sheet_to_json(data, type)有两个参数,第一个是我们wordBook对象里面Sheets对象对应的数据,第二个参数配置如下:

raw: 使用原始值 (true) 或格式化字符串 (false)  (默认值:true)dateNF: 在字符串输出中使用指定的日期格式(默认值:FMT 14)defval: 使用指定值代替 null 或 undefined ()blankrows: 在输出中包含空行**(默认值:** )

range: 

        (number)使用工作表范围,但将起始行设置为值

        (String)使用指定范围(A1 样式的有界范围字符串

        (default)使用工作表范围 ( worksheet[‘!ref’])

header:

        1: 生成数组数组(“二维数组”)

        "A".行对象键是文字列标签

        array of strings: 使用指定的字符串作为行对象中的键

        (default): 将第一行作为键读取并消除歧义

下面就是整个导入excel文件并读取数据的代码流程了,我们可以对得到的数据作为参数与后端接口进行对接就可以了!

// 处理excel文件excelFileMethod(e) { // 导入状态和文件信息 var _this = this _this.importStatus = true const excelFile = e.target.files // 构建fileReader对象 const fileReader = new FileReader() // 该事件为读取完成时触发 fileReader.onload = function (ev) { try { const data = ev.target.result const workbook = XLSX.read(data, {type: 'binary'}) const list = '' const listNew = list.concat(XLSX.utils.sheet_to_json(workbook.Sheets['sheets1'], {header: 1})) _this.excelData.list = listNew.slice(6).split(',') // 得到的数据发送axios请求 importExcel(_this.excelData).then(res => { console.log(res) _this.importStatus = false if (res.code === 200) { _this.$alert(res.data.msg, '导入成功', { confirmButtonText: '确定', callback: () => { // 确认后做什么 } }) } else { _this.$alert(res.data.msg, '导入失败', { confirmButtonText: '确定', callback: () => { // 确认后做什么 } }) } }) } catch (e) { _this.$message({message: '文件类型不正确', type: 'warning'}) } } // 读取数据 fileReader.readAsBinaryString(excelFile[0])}

后续还会持续更新技术问题感兴趣的小伙伴可以点关注或者是私信我哦!!!

本文链接地址:https://www.jiuchutong.com/zhishi/299797.html 转载请保留说明!

上一篇:【NLP屠夫系列】- NER之实战BILSTM(网络用语屠夫)

下一篇:html常用font-family设置字体样式(HTML常用的表单控件有哪些)

  • 苹果手机闹钟怎么设置隔几分钟(苹果手机闹钟怎么换铃声)

    苹果手机闹钟怎么设置隔几分钟(苹果手机闹钟怎么换铃声)

  • 三星手机通话录音在哪里能找到(三星手机通话录音怎么找到)

    三星手机通话录音在哪里能找到(三星手机通话录音怎么找到)

  • 飞行模式在哪里设置(怎么关闭飞行模式在哪里)

    飞行模式在哪里设置(怎么关闭飞行模式在哪里)

  • 荣耀30s可以支持NFC吗(荣耀30s可以支持无线充电吗)

    荣耀30s可以支持NFC吗(荣耀30s可以支持无线充电吗)

  • 抖音规定只能录15秒吗(抖音只能录视频不能拍照吗)

    抖音规定只能录15秒吗(抖音只能录视频不能拍照吗)

  • 目前音频卡的主要功能有(目前音频卡具备以下哪些功能?)

    目前音频卡的主要功能有(目前音频卡具备以下哪些功能?)

  • lhdc可以通过MIUI11实现吗(小米lhdc在哪)

    lhdc可以通过MIUI11实现吗(小米lhdc在哪)

  • 笔记本连不上WIFI怎么办(笔记本连不上wifi是什么原因)

    笔记本连不上WIFI怎么办(笔记本连不上wifi是什么原因)

  • x分身用不了(x分身为什么用不了)

    x分身用不了(x分身为什么用不了)

  • 一个微信可以加多少群(一个微信可以加3000个群吗)

    一个微信可以加多少群(一个微信可以加3000个群吗)

  • 微信不能播放视频怎么办(微信不能播放视频怎么解决)

    微信不能播放视频怎么办(微信不能播放视频怎么解决)

  • 淘宝买家中心在哪里(淘宝买家中心网页版)

    淘宝买家中心在哪里(淘宝买家中心网页版)

  • 怎么防范网络安全(怎么防范网络安全隐患)

    怎么防范网络安全(怎么防范网络安全隐患)

  • 无限修改微信号的方法(无限修改微信号软件苹果)

    无限修改微信号的方法(无限修改微信号软件苹果)

  • vivo微信分身怎么设置(vivo微信分身怎么弄)

    vivo微信分身怎么设置(vivo微信分身怎么弄)

  • 苹果11安装软件怎么按两下(苹果11安装软件怎么按两下怎么取消)

    苹果11安装软件怎么按两下(苹果11安装软件怎么按两下怎么取消)

  • word文档所选内容无效(word选中所有内容)

    word文档所选内容无效(word选中所有内容)

  • 华为mate30带来电闪光灯吗(华为mate30来电背景怎么设置)

    华为mate30带来电闪光灯吗(华为mate30来电背景怎么设置)

  • 拼多多怎么送免拼卡(拼多多怎么送免密支付)

    拼多多怎么送免拼卡(拼多多怎么送免密支付)

  • 苹果商店搜不到小红书(苹果商店搜不到的app怎么下载)

    苹果商店搜不到小红书(苹果商店搜不到的app怎么下载)

  • 如何剪辑电影中的一段(如何剪辑电影中的片段视频)

    如何剪辑电影中的一段(如何剪辑电影中的片段视频)

  • 蓝牙耳机一边声音大一边声音小(蓝牙耳机一边声音大一边声音小怎么办)

    蓝牙耳机一边声音大一边声音小(蓝牙耳机一边声音大一边声音小怎么办)

  • vivox27pro有没有红外线(vivox27pro有没有红外遥控器功能)

    vivox27pro有没有红外线(vivox27pro有没有红外遥控器功能)

  • vivox27面部识别在哪里(vivo手机面部识别)

    vivox27面部识别在哪里(vivo手机面部识别)

  • 华为nova3怎样长截屏(华为nova3e怎么长截屏)

    华为nova3怎样长截屏(华为nova3e怎么长截屏)

  • mysql主从同步的优点

    mysql主从同步的优点

  • 企业汇算清缴时允许税前扣除的工资是
  • 缴纳所得税的账务处理
  • 销售财务软件的公司怎么做账
  • 关税是直接税还是间接税
  • 为什么要计提递延所得税
  • 跨年租赁费如何处理
  • 个体工商户属于非法人组织吗
  • 经营所得预缴申报时间
  • 增值发票每月上报是怎么个程序吗
  • 编制初始计量有什么要求
  • 小规模增值税的三个附加税计算公式是什么
  • 罚款收据与通用的区别
  • 融资融券与普通证券交易的区别体现在
  • 进口货物关税计入成本吗
  • 抵押贷款合同印花税怎么算
  • 有现金折扣方式有哪些
  • 事业单位劳务派遣工作值得去吗
  • 固定资产发票怎么入账
  • 当月取得的进项必须当月勾选吗
  • 给客户办理分期
  • 资产折旧摊销扣什么税
  • 收到雇主责任险发票计入什么科目
  • 质保金付款时怎么付
  • 计提的利息收入交所得税吗
  • 企业研发费用税前抵扣
  • 商业承兑汇票需要银行审核吗
  • 只交社保不发工资可以吗
  • 购买加油卡怎么入账
  • win11安卓子系统教程
  • 浏览器备份文件在哪里
  • win7系统怎么重装win10系统
  • 公司不运营了需要注销吗
  • php生成二维码
  • 企业所得税职工福利扣除标准
  • Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
  • 郁金香地图
  • 关停所有swap分区的命令
  • 以前年度的销售退回,冲减哪年的
  • 原生js获取元素高度
  • linux扫描命令
  • 其他应付款贷方余额表示谁欠谁
  • 个税申报密码重置多久能用
  • 销售使用过的车辆应该如何交增值税
  • 增值税附加申报表怎样填小规模
  • sql server定时作业
  • 航空运输电子客票行程单查验
  • 资本公积的用途主要用于
  • 兼职会计的工资需要开发票吗
  • 进项税额抵扣如何做账
  • 把其他应付款转成实收资本的话需要去工商改注册资本么
  • 按照现行会计制度的规定,下列票据中
  • 增值税专用发票查询系统官方网站
  • 十二月份没出现问题
  • 会计里面的管理费用
  • 资金股东占股比例
  • 物流公司挂靠车辆如何做账?
  • mysql保留整数
  • win7系统安装win10 怎么安装
  • 卷影复制是什么
  • 在microsoft store
  • linux建立动态库链接
  • Win7系统打开文件夹没有自动排列选项
  • 苹果官网
  • 启动图形界面
  • ps到底怎么用
  • 安装ubuntu后无法进入windows
  • win7电脑怎么设置自动锁屏
  • cocos creator 资源加密
  • 利用python进行
  • jquery的实现原理
  • 批处理查询文件是否存在
  • 使用Android Go的手机
  • nodejs 获取命令行参数
  • scrollview不滚动
  • android 笔记软件推荐
  • &lt;script defer&gt; defer 是什么意思
  • android键盘aosp
  • 最大的k个数python
  • 委托人委托代理人的区别
  • 农副产品营业执照范本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设