前端获取excel文件数据(读取excel数据到前端展示)

前端使用xlsx插件读取excel文件数据。我是实习新手，请谨慎阅读.

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

功能的实现思路：

文件选择=FileReader对象获取二进制数据=XLSX处理二进制数据=获取数据

1.导入按钮的样式与事件

首先我们需要的是一个导入按钮，但是我们的导入按钮不太好处理触发选中文件的change事件，所以我们可以使用定位来解决这个问题。原理是：将选择文件按钮覆盖在普通按钮的正上方，将选择文件按钮的透明度改为0。

el-buttonsize='mini'type='success'style='margin-top:10px':disabled='disabled'class='el-dialog-position'spanv-if='importStatus===false'importiclass='el-icon-uploadel-icon--right'/输入ref='files'type='file'v-if='!disabled'class='excelFile'@change='excelFileMethod'//spanspanv-if='importStatus===true'导入iclass='el-icon-loadingel-icon--right'//span/el-button

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

我们不需要担心这么大量的数据。我们只需要关注目标对象中的文件对象，因为稍后我们会需要它。但请注意，这里的信息只是文件信息，不是数据，也不是二进制文件！

2.对得到的文件信息进行处理

首先介绍一下fileReader。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件的内容。使用File或Blob对象指定要读取的文件或数据。这里有一个地址，大家可以自己看看属性和方法的使用。我就不过多介绍了……先看代码：

//更改事件excelFileMethod(e){var_this=this//excel文件信息constfiles=e.target.filesconsole.log(files);//构造fileReader对象constfileReader=newFileReader()//读取操作完成WhenfileReader.onload=function(e){try{//二进制数据console.log(e.target.result)}catch(e){console.log('文件类型不正确')return}}//读取指定文件内容fileReader.readAsBinaryString(files[0])}

第一步是构造一个新的FileReader对象。第二步是使用FileReader.readAsBinaryString()读取指定Blob的内容。完成后，结果属性将包含读取的文件的原始二进制数据。第三步是FileReader.onLoad。当读操作完成时触发该事件。

3.对得到的二进制数据进行处理

要使用XLSX插件，我们需要先下载并配合CND使用，然后再使用。也可以用npm安装，看个人需求。这是一个vue项目，所以我用npm安装了它，然后我们需要引入XLSX。方法如下：

从“xlsx”导入XLSX

通过上面的代码，我们已经获得了二进制数据，下面我们开始解析二进制数据吧！使用XLSX.read(data,{type:type})方法来实现此目的。type的主要取值如下：

base64：以base64方式读取二进制：BinaryString格式string：UTF8编码的字符串buffer：nodejsBufferarray：Uint8Array，8位无符号数组file：文件的路径该方法返回一个workBook对象。对象的内容如下：

您可以看到workBook对象。sheetNames存储了所有的sheet名称，Sheets存储了每个sheet的具体内容。每个sheet通过一个像A1这样的键值来保存每个单元格的内容，我们称之为单元格对象。

解析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)dateNF:在字符串输出中使用指定的日期格式defval:使用指定值而不是null或undefined()Blankrows:在输出中包含空行**范围：

使用工作表范围，但将起始行设置为值

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

标头：

1:生成数组的数组

'A'。行对象键是文字列标签

字符串数组：使用指定的字符串作为行对象中的键

:读取第一行作为键并消除歧义

以下是导入excel文件并读取数据的整个代码流程。我们可以将获取到的数据作为参数来连接后端接口！

//处理excel文件excelFileMethod(e){//导入状态和文件信息var_this=this_this.importStatus=trueconstexcelFile=e.target.files//构建fileReader对象constfileReader=newFileReader()//这个事件读取完成时触发fileReader.onload=function(ev){try{constdata=ev.target.resultconstworkbook=XLSX.read(data,{type:'binary'})constlist=''constlistNew=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=falseif(res.code===200){_this.$alert(res.data.msg,'导入成功',{informButtonText:'确定',callback:()={//确认后做什么}})}else{_this.$alert(res.data.msg,'导入失败',{informButtonText:'确定',callback:()={//确认后做什么}})}})}catch(e){_this.$message({message:'错误的文件类型',type:'警告'})}}//读取数据fileReader.readAsBinaryString(excel文件[0])}

后续我们会持续更新技术问题。有兴趣的朋友可以关注或者私信我！