vue中excal表格的导入和导出

注意：vue中要实现表格的导入与导出，首先要install两个依赖，

npm install -S file-saver xlsx  和  npm install -D script-loader。其次，在项目src目录下新建一个文件夹vendor（名字随意），在此文件夹下放置两个文件Blob.js和Export2Excal.js（下载地址：http://files.cnblogs.com/files/wangyunhui/vendor.rar）。之后就可以愉快的导入导出了。

 

 

1、导入

<input id="upload" type="file" @change="importfxx(this)"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

importfxx(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();
	//if (!FileReader.prototype.readAsBinaryString) {
		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]);
				}
				var XLSX = require('xlsx');
				if(rABS) {
					wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
						type: 'base64'
					});
				} else {
					wb = XLSX.read(binary, {
						type: 'binary'
					});
				}
				outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
			}
			reader.readAsArrayBuffer(f);
		}
		if(rABS) {
			reader.readAsArrayBuffer(f);
		} else {
			reader.readAsBinaryString(f);
		}
}

2、导出

importexcel: function() {　//兼容ie10哦！
　　require.ensure([], () => {　　　　　　　　
	const { export_json_to_excel } = require('../../vendor/Export2Excel');　　//引入文件　　　　　　
	const tHeader = ['用户名', '姓名', '部门', '职位', '邮箱', '充值']; //将对应的属性名转换成中文
	//const tHeader = [];　
	const filterVal = ['userName', 'realName', 'department', 'position', 'email', 'money'];//table表格中对应的属性名　　　　　 　　　
	const list = this.sels;　　　　　　　　
	const data = this.formatJson(filterVal, list);　　　　　　　　
	export_json_to_excel(tHeader, data, '列表excel');
    })
},

　

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
}