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;console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1");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.导出

inportexcel: 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');　　　　　　})}