vue项目中: 导入excel表格(xlsxw)并解析表格内数据,拿到导入的xlsx文件中的数据

一 需求

二 插件

npm install xlsx --save

npm 下载后,可以直接使用,无需在 main.js中导入;

三 代码(核心)

HTML代码

HTML代码（用的是element-ui,不同前端框架获取到的对象可能不同，因此，需注在这里插入代码片意寻找自己获取到的对象中的正确File对象）

<el-upload                
class="upload-demo"                
ref="upload"                
action=""                
:auto-upload="false"                
:file-list="fileList"                
:on-change="handleChange"                
multiple                
:show-file-list="false"                
>              
<el-button type="text">点击上传</el-button>                         
</el-upload>

利用elementUI 自带的上传组件,来选取文件,这个是核心; action所以设置为空;

data

data(){	
	return{
		fileList:[],            
		file:""
	}
}

js代码 (核心)

// handleChange 会自动执行2次,一次是选择文件时,一次是:不管失败或者成功都会在执行一次,
// 如果执行2次,明显是不可以的;根据我各种尝试,终于找到了这2次执行时的区别,以此来把其中的一次给过滤掉;
// 发现第1次执行时,就已经将xlsx文件中的数据已经拿到了,第2次就是失败的 ,此时vfileList 的长度是0
// 所以做一个判断: 将以下所有的代码 放在if(fileList.length !==0){ 所有的代码放入这里} 就可以避免第二次重复执行逻辑代码,只让它执行一下 handleChange 事件就ok啦
handleChange(file,fileList){        
    this.fileList = [fileList[fileList.length - 1]]; // 只能上传一个Excel，重复上传会覆盖之前的        
    this.file = file.raw;        
    let reader = new FileReader()        
    let _this = this        
    reader.readAsArrayBuffer(this.file)        
    reader.onload = function () {            
    	let buffer = reader.result            
    	let bytes = new Uint8Array(buffer)            
    	let length = bytes.byteLength            
    	let binary = ''            
    	for (let i = 0; i < length; i++) {                
    		binary += String.fromCharCode(bytes[i])            
    	}            
    	let XLSX = require('xlsx')   
    	// wb 是核心       
    	let wb = XLSX.read(binary, {                
    		type: 'binary'            
    	})
    	// 拿到了xlsx中的第一个sheet 如果还有其他的sheet 还可以继续拿到其他sheet            
    	let outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])   
    	// 拿到xlsx中的第2个sheet ,同理以此类推
    	let outdata1 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[1]])           
    	console.log(outdata)
}

打印出的outdata

导入的xlsx文件的内容: