vue导出Excel（三）

接上篇文章，需要用到Export2Excel、Blob等js文件        提取码：s8ci

下面demo是把table的json数据导出为多个sheet的Excel，同时也是支持自定义列导出

 找到Export2Excel.js，把下面代码复制到最后即可

export function export_json_to_excel_in_sheet(jsonData, defaultTitle) {
    var wb = new Workbook();
    for(let i=0;i<jsonData.length;i++){
        var ws_name = jsonData[i].sheetName;
        var ws = sheet_from_array_of_arrays(jsonData[i].data);
        wb.SheetNames.push(ws_name);
        wb.Sheets[ws_name] = ws;
    }
    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), title + ".xlsx")
}

 下面是demo，复制即可运行

<template>
  <div>
    <el-button type="primary" @click="export2Excel()">导出Excel</el-button>
  </div>
</template>
 
<script>
export default {
  components: {},
  data() {
    return {
        jsonData: [],
        tableData: [
            { index: 0, username: "张三", password: 333, age: 22 },
            { index: 1, username: "李四", password: 444, age: 23 },
        ],
        tableData2: [
            {date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},
            {date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},
            {date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},
            {date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},
        ],
        tableData3: [
            {key: '1',name: 'John Brown',age: 32,tel: '0571-22098909',phone: 18889898989,address: 'New York No. 1 Lake Park',},
            {key: '2',name: 'Jim Green',tel: '0571-22098333',phone: 18889898888,age: 42,address: 'London No. 1 Lake Park',},
            {key: '3',name: 'Joe Black',age: 32,tel: '0575-22098909',phone: 18900010002,address: 'Sidney No. 1 Lake Park',},
            {key: '4',name: 'Jim Red',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'London No. 2 Lake Park',},
            {key: '5',name: 'Jake White',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'Dublin No. 2 Lake Park',},
        ],
        tableData4: [
            {"id": "10001","username": "杜甫","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"},
            {"id": "10002","username": "李白","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true},
            {"id": "10003","username": "王勃","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
            {"id": "10004","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "666","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
            {"id": "10005","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
            {"id": "10006","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
            {"id": "10007","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
            {"id": "10008","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}
        ],
    };
  },
    methods: {
        export2Excel() {
            this.jsonData = [];
            require.ensure([], () => {
                const {export_json_to_excel_in_sheet} = require("@/excel/Export2Excel");
                this.assemblyData(["索引", "用户名", "密码"],["index", "username", "password"],this.tableData,"模拟数据");
                this.assemblyData(["日期", "名称", "地址"],["date", "name", "address"],this.tableData2,"element数据");
                this.assemblyData(["索引", "用户名", "年龄", "电话", "手机", "地址"],["key", "name", "age", "tel", "phone", "address"],this.tableData3,"antdDesign数据");
                this.assemblyData(["索引", "用户名", "邮箱", "性别", "城市", "签名", "积分", "IP", "加入时间"],["id", "username", "email", "sex", "city", "sign", "experience", "ip", "joinTime"],this.tableData4,"layui数据");
                export_json_to_excel_in_sheet(this.jsonData, "用户列表");
            });
        },
        /**
         * 加入一个sheet调用此方法一次
         * fieldName    列名
         * filterVal    每列对应key
         * tableData    表格的json数组数据
         * sheetName    当前sheet的名称
         */
        assemblyData(fieldName,filterVal,tableData,sheetName){
            let json = {sheetName};
            let data = tableData.map((v) => filterVal.map((j) => v[j]));
            data.unshift(fieldName);
            json.data = data;
            this.jsonData.push(json) 
        }
    },
};
</script>
 
<style lang="scss" scoped>
</style>