前端xlsx导出excel (多个sheet分页+合并列)

合并列、合并行

  sheet["!merges"] = [
    {  //合并第四行(C4)第三列到第五列
      s: {//s为开始
        c: 2,//开始列
        r: 3//开始取值范围
      },
      e: {//e结束
        c: 4,//结束列
        r: 3//结束范围
      }
    }, {  //合并A1A2单元格
      s: {//s为开始
        c: 0,//开始列
        r: 0//开始取值范围
      },
      e: {//e结束
        c: 0,//结束列
        r: 1//结束范围
      }
    },
]

多个sheet分页+合并列实例:

<template>
    <el-button @click="exportCsv()" style="margin-left:0px">导出数据</el-button>
</template>
<script>  
//mixins 
import { format } from "../../../../util/Formatter";
import { DateToString, EndOfTheMonth, Trunc, AddMonths, AddDays } from "../../../../util/DateUtil";
import * as ObjectUtil from "../../../../util/ObjectUtil";
import * as CsvHelper from "../../../../util/CsvHelper";

import * as XLSX from 'xlsx'
export default {
    //上游产品
    mixins: [],
    components: {},
    data() {
        return { 
            model: {
                columns: [
                    { title: "上游渠道", field: "channelNo", minWidth: "上游渠道", filter: { type: "upChannelNo" }, minWidth: "220", },
                    { title: "结算账期", field: "accountTime", minWidth: 150, format: { type: "date", pattern: "yyyy年MM月" }, },
                    { title: "分类", field: "rewardType", minWidth: "120", },
                    { title: "金额汇总", field: "totalAmount", minWidth: "120", },
                    { title: "激活时间", field: "activateMonth", minWidth: "120", },
                    { title: "T0", field: "t0", minWidth: "80", },
                    { title: "T1", field: "t1", minWidth: "80", },
                    { title: "T2", field: "t2", minWidth: "80", },
                    { title: "T3", field: "t3", minWidth: "80", },
                    { title: "T4", field: "t4", minWidth: "80", },
                ],
                list: [{"channelNo":"UC1940","accountTime":"2022-12-31T16:00:00.000+00:00","rewardType":"预估佣金","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2022-12-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-01","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2022-12-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-02","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2022-12-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"转结","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2022-12-31T16:00:00.000+00:00","rewardType":"预估-实际差额","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-01-31T16:00:00.000+00:00","rewardType":"预估佣金","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-01-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-02","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-01-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-03","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-01-31T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"转结","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-01-31T16:00:00.000+00:00","rewardType":"预估-实际差额","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-02-28T16:00:00.000+00:00","rewardType":"预估佣金","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-02-28T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-03","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-02-28T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"2023-04","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-02-28T16:00:00.000+00:00","rewardType":"实际结算","totalAmount":0,"activateMonth":"转结","t0":0,"t1":0,"t2":0,"t3":0,"t4":0},{"channelNo":"UC1940","accountTime":"2023-02-28T16:00:00.000+00:00","rewardType":"预估-实际差额","totalAmount":0,"activateMonth":null,"t0":0,"t1":0,"t2":0,"t3":0,"t4":0}]
            }, 
        };
    }, 
    methods: {
        exportCsv() { 
            let columnConfigs = this.model.columns
            let headData = [];
            //设置表头
            columnConfigs.forEach((item, index) => { headData.push(item.title.replace(/"/g, '""')); });
            let channelNoList = {}
            this.model.list.forEach(els => {
                let channelName = CsvHelper.getFilterName1(els.channelNo, "upChannelNo");
                if (!channelNoList[channelName]) channelNoList[channelName] = []
            })
            Object.keys(channelNoList).forEach(els => {
                channelNoList[els].push(headData);
                let list = this.model.list.filter(item => CsvHelper.getFilterName1(item.channelNo, "upChannelNo") == els)
                list.forEach(item => {
                    let rowData = [];
                    columnConfigs.forEach((it, index) => {
                        let currentValue = ObjectUtil.IsEmpty(item[it.field])
                            ? it.defaultValue
                            : item[it.field];
                        let value = "";
                        value = currentValue;

                        if (it.filter && !ObjectUtil.IsEmpty(currentValue)) {
                            value = CsvHelper.getFilterName1(currentValue, it.filter.type);
                        }
                        else if (it.format && it.format.type == 'fun') {
                            value = format(item, it.format);
                        } else if (!ObjectUtil.IsEmpty(currentValue)) {
                            value = format(currentValue, it.format);
                        }
                        rowData.push(value);
                    });
                    if (rowData.length) channelNoList[els].push(rowData);
                })
            })
            // console.log(channelNoList, 'channelNoList');
            let Csv = channelNoList
            const workbook2blob = (workbook) => {
                const wopts = {
                    bookType: "xlsx",
                    bookSST: false,
                    type: "binary"
                };
                const wbout = XLSX.write(workbook, wopts);
                // 将字符串转ArrayBuffer
                const s2ab = (s) => {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
                    return buf;
                }
                const blob = new Blob([s2ab(wbout)], {
                    type: "application/octet-stream"
                });
                return blob;
            }
            const dataKey = Object.keys(Csv);
            const wb = XLSX.utils.book_new();

            dataKey.forEach(element => {
              //循环分页(多个sheet)
                let sheet = XLSX.utils.json_to_sheet(Csv[element])
                // sheet = XLSX.utils.sheet_to_json(sheet, { range: 1 })
                let merges = [], oldlistA = [], listH = []
                merges.push({ s: { c: 0, r: 2 }, e: { c: 0, r: Csv[element].length } })
                Csv[element].forEach((item, index) => {
                    if (item[0] != '上游渠道') {
                        if (oldlistA.indexOf(item[1]) < 0) {
                            let listP = Csv[element].filter(ele => ele[1] == item[1])
                            merges.push({ s: { c: 1, r: index + 1 }, e: { c: 1, r: index + listP.length } })
                            oldlistA.push(item[1])
                        }
                        if (listH.indexOf(item[1] + item[2]) < 0) {
                            let listP = Csv[element].filter(ele => ele[1] == item[1] && ele[2] == item[2])
                            merges.push({ s: { c: 2, r: index + 1 }, e: { c: 2, r: index + listP.length } })
                            listH.push(item[1] + item[2])
                        }
                    }
                })
                // console.log(merges);
                sheet["!merges"] = merges

                // console.log(sheet, 'sheet');
                XLSX.utils.book_append_sheet(wb, sheet, element);

            })
            // return
            const workbookBlob = workbook2blob(wb);
            // 生成链接导出文件
            const url = window.URL.createObjectURL(workbookBlob);
            const downloadLink = document.createElement('a');
            downloadLink.href = url;
            downloadLink.download = 'data.xlsx';
            downloadLink.click();
            window.URL.revokeObjectURL(url);
        },
    },
};
</script>

你可能感兴趣的:(element,vue2.0,前端,excel,javascript)