利用XLSX工具库实现xlsx或xls的上传

在实际的业务需求有很多是需要进行导入导出功能的。XLSX是一个十分方便且功能完善的工具库。今天便利用其先介绍一下导入功能。

一、XLSX工具库

XLSX是一个简单快捷易上手的xlsx、xls文件上传的工具库。读取excel主要是通XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象.

type表示数据编码类型，主要有：base64、binary、buffer、file、array、string六种。

xlsx下载：

npm install xlsx

 二、前端代码

<el-button @click = "importXLSX(file)">导入</el-button>

import XLSX from "xlsx";

importXLSX(file){
	//文件格式过滤
	const fileType = file.name.split('.')[1]
	const isRightFile = ['xlsx','xls'].some(item => item === fileType)
	if(!isRightFile){
		alert("格式错误，仅支持xlsx、xls两种格式文件的导入")
		return
	}
	this.fileToJson(file).then(tabJson => {
		if(tabJson && tabJson.length>0){
			this.xlsxJson = tabJson
			for(var i=0; i<= xlsxJson.length; i++){
				var data = this.xlsxJson[i].sheet;
				uploadExcel(Object.assign({data:data})).then(response => {
					if(response.data.data.equals(true)){
						this.$message({
							showClose: true
							message: '导入成功'
							type: 'success'
						})
					}else{
						this.$message({
							showClose: true
							message: '导入失败'
							type: 'error'
						})
					}
				})
			}
		}
	})
}
fileToJson(file){
	return new Promise(function(resolve, reject){
		const reader = new FileReader()
		reader.onload = function(e){
			const data = e.target.result
			//引入XLSX，XLSX是一个简单的xlsx上传下载工具库
			XLSX.reader(data,{type:'binary'})
			const result = []
			this.wb.SheetNames.forEach((sheetName) => {
				result.push({
					sheetName: sheetName	//获取表头
					//调用XLSX工具类将sheet转变为json
					sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
				})
			})
			
			resolve(result)
		}
		reader.readAsBinaryString(file.raw)
	})
}

 

三、后台代码：

@PostMapping("/animal/upload")
public boolean uploadExcel(@RequestBody JSONObject data){
	boolean flag = true;
	JSONArray json = data.getJSONArray("data");
	List<Animal> list = new ArrayList();
	//json解析
	for(int i = 0; i < json.size(); i++){
		JSONObject jsonObject = json.getJSONObject(i);
		Animal animal = new Animal();
		animal.setName(jsonObject.get("动物名").toString());
		animal.setSex(jsonObject.get("性别").toString());
		animal.setAge(jsonObject.get("年龄").toString());
		animal.setOwner(jsonObject.get("铲屎官").toString());
		list.add(animal);
	}
	if(json.size() > 0){
		animalService.saveBatch(list);
		return flag;
	}else{
		flag = false;
		return flag;
	}
}