vue+elementui导入、导出excel

1、安装插件xlsx

npm install xlsx --save-dev

2、引入：将方法封装为一个类，创建excel.js文件

import * as xlsx from 'xlsx'
class mExcel{
	constructor(){
	}
	//将文件按照二进制进行读取
	readFile(file){
		return new Promise(resolve=>{
			let reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = ev =>{
				resolve(ev.target.result )
			}
		})
	}
	//导入excel  ------ 将二进制转json (file是文件流，typeObj是传给后端的表格字段，suc是成功的回调，err是错误的回调）
	async ByteToJson(file,typeObj,suc,err){
		let data = await this.readFile(file);
		let workbook = xlsx.read(data, { type: "binary" }),
		  worksheet = workbook.Sheets[workbook.SheetNames[0]];
		data = xlsx.utils.sheet_to_json(worksheet);
		let arr = [];
		data.forEach(item => {
		     let obj = {};
		     for (let key in typeObj) {
		       if (!typeObj.hasOwnProperty(key)) break;
		       let v = typeObj[key],
		         text = v.text,
		         type = v.type;
		       v = item[text] || "";
		       type === "string" ? (v = String(v)) : null;
		       type === "number" ? (v = Number(v)) : null;
		       obj[key] = v;
		     }
		   arr.push(obj);
		 });
		 if(arr.length!=0){
			 suc(arr)
		 }else{
			 err()
		 }
	}
	//导出excel --------
	exportExcel(excelData){
		//excelData是外部传进来的对象{excelArr:表格数组,excelName:excel文件命名}
		let data = excelData.excelArr;
		let excelName = excelData.excelName; 
		let sheet = xlsx.utils.json_to_sheet(data)
		let book = xlsx.utils.book_new()
			xlsx.utils.book_append_sheet(book,sheet,'sheet1')
			xlsx.writeFile(book,`${excelName}.xlsx`)
	}
	
}
 export function initExcel(){
	 return new mExcel();
 }

注：xlsx.writeFile(book,${excelName}.xlsx) 使用 .lsx后缀导出到excel最大函数为65535条，如果数据量过大可以使用.xlsx后缀，可以保存1048576条数据

3、使用mExcel类：在main.js中引入这个js文件并实例化

import './utils/excel.js'
let mExcel = initExcel();
vue.prototype.$mExcel = mExcel;  //挂载到vue上面，这样在任何页面只要使用this.$mExcel就可以了 

与element组件结合使用案例
1） 导出：

<el-button type="warning" @click="exportE">导出</el-button>

async exportE(){
//这里的name、adress、code值可以通过v-model绑定实现导出搜索的数据
	let data = {
		name:this.name,
		adress: this.adress,
		code: this.code
	}
	//调用接口 await getGoodsListApi(data) == this.$http.post('url',data).then()
	let resAll = await getGoodsListApi(data);
		if(resAll.data.length==0){
			this.$message.error("没有数据可以导出哦！");
			return;
		}
		//对请求的数据做处理
		let excelArr = resAll.data.map(item=>{
			return{
				"名字":item.name,
				"住址":item.adress,
				"编码":item.code
				}
			});
			
			let excelData = {
				excelArr:excelArr,
				excelName:'信息表',
			}
			//直接调用对象的方法即可
			this.$myExcel.exportExcel(excelData);	
	},

2）导入

 <el-upload
	class="upload-exls"
	action
	:auto-upload="false"
	accept=".xls, .xlsx"
	:limit="1"
	:show-file-list="false"
	:on-change="handle"
	>
<el-button  type="primary" icon="el-icon-upload el-icon--right">导入</el-button>
</el-upload>
 async handle(file, fileList){
		  console.log(file); //文件流放在file.raw中
		  //定义字段即将导入的excel表中的数据显示在el-table中，这些字段是显示的部分（同时需要将导入的数据传给后端）
		  let typeObj = {
			name:{
				text:"名字",
				type:"string"
			},
			adress: {
				text:"地址",
				type:"string"
			},
			code: {
				text:"编码",
				type:"number"
			}
		  };
		  //  接口 ：/test/msg
		  //  请求参数：
		  //     {
		  //		name:'',
		  //		adress:'',
		  //		code:'',
		  //		text:''
		  //	}
		 this.$myExcel.ByteToJson(file.raw,typeObj,(res)=>{
		 	//如果请求接口还需要别的字段就需要对数据做处理例如添加text字段
			 res.forEach((item)=>{
				item.text =""
			 })
		//调用导入的接口，这里是调用批量插入的接口，将数组传给后端	
		this.$http.post(this.api.commonURL + "/test/msg",res).then(res=>{
			if(res.message =="success"){
				this.$message.success(`成功导入${res.data.count}条数据！`)
			}
			}).catch(err=>{
				console.log(err)
			})
		 },()=>{
			 this.$message.err("导入失败了！")
		 });
	  },

参考文章：https://www.jb51.net/article/221160.htm