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();
    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.导出

exportExcel: function() {　//兼容ie10哦！
    require.ensure([], () => {　　　　　　　　
        const { export_json_to_excel } = require('../../vendor/Export2Excel');　　//引入文    件　　　　　　
        const tHeader = ['用户名', '姓名']; //将对应的属性名转换成中文　　　　　
        const filterVal = ['userName', 'realName'];//table表格中对应的属性名　　　　　 　　　
        const list = this.sels;　　// this.sels就是你想要导出的数据[{userName: '1001', realName: '张三'}]
        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]));
}