Ant Design of Vue导出复杂样式的EXCEL

效果图：

实现代码:

<script>
    import { GetVouchersByConditions, DeleteVoucher, GetDictionaryByName } from '../../../utils/api.js'
    const ExcelJS = require('exceljs');
    import { saveAs } from "file-saver";
    import { math, hasPermisson } from '../../../utils/func.js'
    import logo from "@/assets/image/logo.png"
    const data = [];
    const columns = [{
        title: '区域',
        dataIndex: 'VoucherHead.Area',
        key: 'VoucherHead.Area',
        width: '7%',
        scopedSlots: { customRender: 'VoucherHead.Area' },
    },
        {
            title: '决算单编号',
            dataIndex: 'VoucherHead.VoucherCode',
            key: 'VoucherHead.VoucherCode',
            width: '9%',
            scopedSlots: { customRender: 'VoucherHead.VoucherCode' },
        },
        {
            title: '单据类型',
            dataIndex: 'VoucherHead.VoucherType',
            key: 'VoucherHead.VoucherType',
            width: '8%',
            scopedSlots: { customRender: 'VoucherHead.VoucherType' },
        },
        {
            title: '决算单标题',
            dataIndex: 'VoucherHead.Title',
            key: 'VoucherHead.Title',
            width: '12%',
            scopedSlots: { customRender: 'VoucherHead.Title' },
        },
        {
            title: '管理费',
            dataIndex: 'VoucherHead.ManageAmount',
            key: 'VoucherHead.ManageAmount',
            width: '8%',
            scopedSlots: { customRender: 'VoucherHead.ManageAmount' },
        },
        {
            title: '利润',
            dataIndex: 'VoucherHead.ProfitAmount',
            key: 'VoucherHead.ProfitAmount',
            width: '8%',
            scopedSlots: { customRender: 'VoucherHead.ProfitAmount' },
        }, {
            title: '税金',
            dataIndex: 'VoucherHead.TaxAmount',
            key: 'VoucherHead.TaxAmount',
            width: '8%',
            scopedSlots: { customRender: 'VoucherHead.TaxAmount' },
        },
        {
            title: '合计',
            dataIndex: 'VoucherHead.SumAmount',
            key: 'VoucherHead.SumAmount',
            width: '9%',
            scopedSlots: { customRender: 'VoucherHead.SumAmount' },
        },
    
        {
            title: '发生日期',
            dataIndex: 'VoucherHead.ProposeDate',
            key: 'VoucherHead.ProposeDate',
            width: '10%',
            scopedSlots: { customRender: 'VoucherHead.ProposeDate' },
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            width: '17%',
            scopedSlots: { customRender: 'operation' },
        }];

    export default
        {
            data() {
                return {
                    data,
                    loading: false,
                    columns,
                    editingKey: '',
                    form: {
                        Area: '',
                        VoucherCode: '',
                        VoucherType: '',
                    },
                    dicArea: [],
                    permissonRoles: ["制单用户", "高级管理员", "超级管理员"],
                    hasNoPermission: false,
                }
            }, activated() {
                this.GetVouchersByConditions();
            }, mounted() {
                this.getArea();
                this.hasNoPermission = hasPermisson(this.permissonRoles, this.$store.getters.roleName);
            },
            methods: {
                search() {
                    this.GetVouchersByConditions();
                },
                add() {
                    this.$router.push('/bill/index');
                },

                edit(record) {
                    this.$router.push({ name: 'Bill', params: { bill: record, type: 'update' } });
                }, detail(record) {
                    this.$router.push({ name: 'Bill', params: { bill: record, type: 'detail' } });
                }
                , onDelete(record) {
                    let self = this;
                    record.VoucherHead.T_VoucherDetails = record.VoucherDetails;
                    DeleteVoucher(r