vue-cli中导入、导出excel

1.安装依赖

npm i file-saver xlsx -S 
npm i script-loader -D

2.创建js

这两个文件的代码我会放在文章的最后。

3.html中

表格为假数据。实际使用时用后台请求到的数据代替即可。丑了点但不影响。

<el-upload action="" :on-change="importChange" :auto-upload="false" :show-file-list="false">
	<el-button type="primary">导入EXCEL</el-button>
</el-upload>

<el-button type="primary" @click="exportExcel()">导出</el-button>

4.导出方法

// 导出表格
exportExcel() {
	require.ensure([], () => {
		const {export_json_to_excel} = require("../vendor/Export2Excel.js");    //这里注意路径问题
		// 表头
		const tHeader = ["id","日期","姓名",	"住址"];
		
		//filterVal 对应的表格里的字段名称
		const filterVal = ["id","date","name","address"];
		
		//list为要导出的数据
		const list = this.tableData;
		const data = this.formatJson(filterVal, list);
		export_json_to_excel(tHeader, data, "员工列表");  //←表格名称
	});
},
formatJson(filterVal, jsonData) {
	return jsonData.map(v => filterVal.map(j => v[j]));
},

点击导出后，打开表格

导出成功~

5.导入表格

导入比导出麻烦些，也许需求会让你根据导入的表格中的id去搜寻更多信息。这里先做个最简单的。
拿刚刚导出的表格随便改点内容就拿来用吧~

// 导入
importChange(file, fileList) {
	if (fileList.length > 1) {
		fileList.splice(0, 1);
	}
	this.fileTemp = file.raw;
	if (this.fileTemp) {
		this.importExcel(this.fileTemp);  
	} else {
		this.$message({
			type: 'warning',
			message: '请上传附件！'
		})
	}
},

importExcel(obj){
	let _this = this;
	let inputDOM = this.$refs.inputer;
	// 通过DOM取文件数据		
	this.file = event.currentTarget.files[0];

	var rABS = false; //是否将文件读取为二进制字符串
	var f = this.file;
	var reader = new FileReader();
	
	FileReader.prototype.readAsBinaryString = function(f) {
		var binary = "";
		var rABS = false; //是否将文件读取为二进制字符串
		var pt = this;
		var wb; //读取完成的数据
		var outdata;
		var reader = new FileReader();
		reader.onload = function(e) {
			var bytes = new Uint8Array(reader.result);
			var length = bytes.byteLength;
			for (var i = 0; i < length; i++) {
				binary += String.fromCharCode(bytes[i]);
			}
			//此处引入，用于解析excel
			var XLSX = require("xlsx");
			if (rABS) {
				wb = XLSX.read(btoa(fixdata(binary)), {
					//手动转化
					type: "base64"
				});
			} else {
				wb = XLSX.read(binary, {
					type: "binary"
				});