注意: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]));
}

 

 

 

 

Logo

前往低代码交流专区

更多推荐