基于Element Plus 表格导入和导出excle文件

首先，安装依赖

npm install --save xlsx file-saver
//也可以使用cnpm安装

查看package.json是否安装成功，以下代表安装成功

"file-saver": "^2.0.5",
"xlsx": "^0.18.5"

页面中引入：

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

导入功能：

1、添加导入按钮，样式大家后期可以自行设计

<div class="m-btn">
	导入表格
	<input type="file" accept=".xls,.xlsx" class="upload-file" @change="changeExcel($event)" />
</div>

2、change事件函数

const tableData = ref([]);//表格数据
const changeExcel = (e) =>{
		const files = e.target.files;
		if (files.length <= 0) {
			return false
		} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
			return false
		}
		// 读取表格数据
		const fileReader = new FileReader();
		fileReader.onload = ev => {
			const workbook = XLSX.read(ev.target.result, {
				type: "binary"
			})
			const wsname = workbook.SheetNames[0];
			const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
			dealExcel(ws);//转换数据格式
			tableData.value = ws;//赋值
		}
		fileReader.readAsBinaryString(files[0])
	}

这时候我们会发现，转换的数据的格式键名是中文，这肯定是不行滴~所以还需要再进行一次转换

3、转换数据格式

const dealExcel = (ws)=> {
	let keymap = { // 转换的开头
		"姓名": "name",
		"工资月份": 'month',
		"工资总金额": 'money',
		"部门": 'section',
		"职位": 'job',
	}
	ws.forEach(sourceObj => {
		Object.keys(sourceObj).map(keys => {
			let newKey = keymap[keys];
			if (newKey) {
				sourceObj[newKey] = sourceObj[keys]
				delete sourceObj[keys]
			}
		})
	})
	tableData.value = ws
};

测试效果：

 

 

导出功能：

1、添加导出按钮以及点击事件

<el-button type="primary" round @click="exportClick ">导出表格</el-button>

2、在table表格中添加id

 3、写点击事件的方法函数

const exportClick = () => {
	var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
	/* get binary string as output */
	var wbout = XLSX.write(wb, {
		bookType: 'xlsx',
		bookSST: true,
		type: 'array'
	})
	try {
		FileSaver.saveAs(new Blob([wbout], {
			type: 'application/octet-stream'
		}), '工资表.xlsx')//自定义文件名
	} catch (e) {
		if (typeof console !== 'undefined') console.log(e, wbout);
	}
	return wbout
};

 测试效果：