位置: 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常用的表单控件有哪些)

  • 抖音怎么解除收藏仅自己可见(抖音怎么解除收藏不可见)

    抖音怎么解除收藏仅自己可见(抖音怎么解除收藏不可见)

  • 快手和快手极速版账号是不是通用的(快手和快手极速版账号通用吗)

    快手和快手极速版账号是不是通用的(快手和快手极速版账号通用吗)

  • vivox30pro和华为p40pro拍照对比(vivox30pro和华为p30pro拍照)

    vivox30pro和华为p40pro拍照对比(vivox30pro和华为p30pro拍照)

  • 算法常用的表示方法有哪些(常用的算法表示形式有哪些)

    算法常用的表示方法有哪些(常用的算法表示形式有哪些)

  • 海底捞无线充电怎么用(海底捞无线充电区域)

    海底捞无线充电怎么用(海底捞无线充电区域)

  • a1443是iPhone5s充电器(a1534充电器是多少瓦)

    a1443是iPhone5s充电器(a1534充电器是多少瓦)

  • 网管型和非网管型交换机有什么区别(网管型和非网管型交换机可以互相通讯吗)

    网管型和非网管型交换机有什么区别(网管型和非网管型交换机可以互相通讯吗)

  • Word行距25磅怎么调(word文档行距25磅怎么设置)

    Word行距25磅怎么调(word文档行距25磅怎么设置)

  • macpro触控栏可以显示歌词吗(macpro触控栏可以显示时间)

    macpro触控栏可以显示歌词吗(macpro触控栏可以显示时间)

  • 快手小店提现额度是多少(快手小店提现额度在哪里)

    快手小店提现额度是多少(快手小店提现额度在哪里)

  • 电脑怎么设置软件安在D盘(电脑怎么设置软件安装默认D盘?)

    电脑怎么设置软件安在D盘(电脑怎么设置软件安装默认D盘?)

  • 手机能连网但是进不了是什么情况(手机能连网但是用不了)

    手机能连网但是进不了是什么情况(手机能连网但是用不了)

  • 爱奇艺清晰度在哪里切换的(爱奇艺清晰度在哪里调整)

    爱奇艺清晰度在哪里切换的(爱奇艺清晰度在哪里调整)

  • 苹果手表5代防水吗(苹果手表5代防水等级)

    苹果手表5代防水吗(苹果手表5代防水等级)

  • i79700f和i79700k区别(i79700k好还是i79700kf好)

    i79700f和i79700k区别(i79700k好还是i79700kf好)

  • 数据管理技术的主要任务和目的是什么(数据管理技术的发展经历了三个阶段)

    数据管理技术的主要任务和目的是什么(数据管理技术的发展经历了三个阶段)

  • 在快手怎么直播视频(在快手怎么直播电视剧操作步骤)

    在快手怎么直播视频(在快手怎么直播电视剧操作步骤)

  • 荣耀20s可以插内存卡吗(华为荣耀20s可以装内存卡吗)

    荣耀20s可以插内存卡吗(华为荣耀20s可以装内存卡吗)

  • 递减是升序吗(递减是什么顺序)

    递减是升序吗(递减是什么顺序)

  • 三星note8有呼吸灯吗(三星note10+没有呼吸灯怎么办?)

    三星note8有呼吸灯吗(三星note10+没有呼吸灯怎么办?)

  • word上标在哪设置(word上标怎么搞)

    word上标在哪设置(word上标怎么搞)

  • 闲鱼账号封了支付宝会影响使用吗(闲鱼账号封了支付宝)

    闲鱼账号封了支付宝会影响使用吗(闲鱼账号封了支付宝)

  • 小米cc9e上市时间(小米cc9e什么时候出的)

    小米cc9e上市时间(小米cc9e什么时候出的)

  • 专项扣除三险一金为0
  • 固定资产新规则
  • 财务上用替票合法么
  • 利息收入需要交印花税吗
  • 汇算清缴交了税怎么做分录
  • 关联方债务豁免需要缴纳所得税吗
  • 开发票产品名称
  • 金税盘维护费申报
  • 商贸企业加工费包括哪些
  • 出租不动产房屋交什么税
  • 季度流动比率怎么算
  • 小规模纳税人财务报表是按季还是按月申报
  • 商场采用联营方式的原因
  • 进项税额留底月底销项税金如何结转?
  • 事业基金减少原因一般是什么
  • 施工单位对分包单位能罚款吗
  • 农民工的工资是当月工作过月几号发工资政府有没有规定
  • 关于增值税普通发票情况的函范文
  • 退票费可以开公司发票吗
  • 审计资产评估收费标准
  • 合并报表的少数股东权益分录
  • win10系统还原了怎么恢复
  • 价款包括增值税税率吗
  • 系统托盘右键
  • 核定征收的企业利润怎么处理
  • cnqmax.exe进程的详细注解 cnqmax进程是病毒吗 安全吗
  • 公司投资款无法收回
  • cuda运行环境
  • element-ui table使用type=‘selection‘复选框全禁用-全选禁用
  • 建安企业开具增值税专用发票要求
  • ts中如何定义一个数组
  • 服务器部署环境
  • 怎么调试vue项目
  • 一个惊艳了
  • 红字冲销的增值税发票怎么处理
  • 补提企业所得税财务报表应该如何调整
  • 企业收到企业借款需要交税
  • 减资如何弥补亏损
  • 企业分立房产税如何计算
  • 可以主营业务成本增加现金减少吗
  • 劳务人员劳务费走薪资还是走报销
  • php引用类型
  • access微软
  • 中介公司服务范围都有哪些
  • 纳税减免申报
  • 归还股东借款要交税吗
  • 季报现金流量表可以不填吗
  • 小规模结转成本怎么计算
  • 企业注销后账目需要保留多少年
  • 出口企业有哪些税收
  • 应收应付款会计分录
  • 建筑业简易征收的条件
  • 未收到货款发票是什么意思
  • 房产税怎么实行
  • 替别人公司开发票违法吗
  • 企业购买新能源车免购置税吗
  • 特殊销售方式下的销售额确认图文怎么做
  • 长期待摊费用摊销计算公式
  • 赠送的产品怎么算成本
  • 房地产会计核算科目
  • sqlserver使用方法
  • winxp系统怎么连接网络
  • win10怎么把中文系统改成英文
  • centos7设置bond
  • win8.1备份系统还原
  • [置顶] 《翻身称霸》
  • shell产生随机字符串
  • 批处理统计文件夹内文件大小
  • Android-ViewPager使用示例
  • bat删除隐藏文件
  • php常用函数200个
  • jqueryui easyui
  • unity3d documentation
  • android源码下载地址
  • 江苏税务开票申报操作
  • 购置税发票怎么看自己交了多少税
  • 消费税组成计税价格为什么要除以1-消费税率
  • 其他收入工会经费必须申报吗
  • 江苏地方税务局2013招考公告
  • 铜陵职业技术学院专业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设