vue前端导入excel表格并解析表格内数据

一、插件

npm install xlsx --save

二、代码

1.html

<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>

2.data

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

3.js

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')            
    	let wb = XLSX.read(binary, {                
    		type: 'binary'            
    	})            
    	let outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])            
    	console.log(outdata)
}

三、如果Excel表格中有日期，会造成一点问题

解决办法

//如果想让xlsx帮我们解析时，就完成解析时间格式，只需要加上如下配置即可

 const workbook = XLSX.read(data, {
      type: "binary",
      cellDates: true,//设为true，将天数的时间戳转为时间格式
});

转换成中国标准时间,我最终想要的是转换成自己想要的时间格式，需要moment工具类

 import moment from "moment";

定义一个转换日期格式的方法（转成日期格式：YYYY-MM-DD）
注意的点：xlsx将excel中的时间内容解析后，会小一天
如2020/11/3，xlsx会解析成 Mon Nov 02 2020 23:59:17 GMT+0800 小了43秒
当再用moment转换成日期时：
Mon Nov 02 2020 23:59:17 GMT+0800 会转成2020/11/2 所以需要在moment转换后＋1天

convertExcelDateFormat: function (row, columnName) {//日期转换
   var date = row[columnName]
   if (date === undefined || date === null || date === "") {
   	return null;
   }
   //非时间格式问题  返回Invalid date
   let retFormat = moment(date).format('YYYY-MM-DD');
   if (retFormat === "Invalid date"){
   	return retFormat;
   }
   return moment(date).add(1, 'days').format('YYYY-MM-DD')
},
});

happy ending

链接: https://www.freesion.com/article/38171418556/.
链接: https://blog.csdn.net/Seven71111/article/details/107375712.