图例

1.先下载相关的依赖
npm i -S xlsx
npm i -S file-saver
npm i -S xlsx-style
如果安装完成，启动报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx,有两个方案解决
（1）找到node_modules\xlsx-style\dist\cpexcel.js中将
var cpt = require(‘./cpt’ + ‘able’) 修改为var cpt = cptable
（2）vue.config.js中修改配置
module.exports = {
configureWebpack: {
externals: {
‘./cptable’: ‘var cptable’
}
}
}
2.vue文件

<template>
    <div class="main-container">
        <el-button type="primary" icon="el-icon-document-delete" @click="exportExcel()">导出excel</el-button>
        <el-table :data="tableData" style="width:100%" class="work-excel-table" border stripe highlight-current-row
            :span-method="arraySpanMethod" :summary-method="getSummaries" show-summary>
            <el-table-column label="登记情况">
                <el-table-column label="统计表">
                    <el-table-column label="单位：件">
                        <el-table-column label="作品类型" width="200">
                            <el-table-column label="登记情况" width="200">
                                <el-table-column label show-overflow-tooltip min-width="70">
                                    <template slot-scope="scope">{
  { scope.row.columnName1 }}</template>
                                </el-table-column>
                                <el-table-column label show-overflow-tooltip min-width="70">
                                    <template slot-scope="scope">{
  { scope.row.columnName2 }}</template>
                                </el-table-column>
                                <el-table-column label show-overflow-tooltip min-width="60">
                                    <template slot-scope="scope">{
  { scope.row.columnName3 }}</template>
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="总计(件)" show-overflow-tooltip min-width="70" prop="sum"></el-table-column>
                        <el-table-column label="文字" show-overflow-tooltip min-width="50" prop="a">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.a.value }}</template>
                        </el-table-column>
                        <el-table-column label="口述" show-overflow-tooltip min-width="50" prop="m">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.m.value }}</template>
                        </el-table-column>
                        <el-table-column label="音乐" show-overflow-tooltip min-width="50" prop="b">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.b.value }}</template>
                        </el-table-column>
                        <el-table-column label="戏剧" show-overflow-tooltip min-width="50" prop="c">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.c.value }}</template>
                        </el-table-column>
                        <el-table-column label="曲艺" show-overflow-tooltip min-width="50" prop="d">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.d.value }}</template>
                        </el-table-column>
                        <el-table-column label="舞蹈" show-overflow-tooltip min-width="50" prop="e">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.e.value }}</template>
                        </el-table-column>
                        <el-table-column label="杂技艺术" show-overflow-tooltip min-width="70" prop="n">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.n.value }}</template>
                        </el-table-column>
                        <el-table-column label="美术" show-overflow-tooltip min-width="50" prop="f">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.f.value }}</template>
                        </el-table-column>
                        <el-table-column label="工程设计图、产品设计图" show-overflow-tooltip min-width="100" prop="j">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.j.value }}</template>
                        </el-table-column>
                        <el-table-column label="建筑" show-overflow-tooltip min-width="50" prop="o">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.o.value }}</template>
                        </el-table-column>
                        <el-table-column label="摄影" show-overflow-tooltip min-width="50" prop="g">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.g.value }}</template>
                        </el-table-column>
                        <el-table-column label="电影" show-overflow-tooltip min-width="50" prop="h">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.h.value }}</template>
                        </el-table-column>
                        <el-table-column label="类电影" show-overflow-tooltip min-width="60" prop="i">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.i.value }}</template>
                        </el-table-column>
                        <el-table-column label="地图、示意图" show-overflow-tooltip min-width="100" prop="k">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.k.value }}</template>
                        </el-table-column>
                        <el-table-column label="模型" show-overflow-tooltip min-width="50" prop="p">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.p.value }}</template>
                        </el-table-column>
                        <el-table-column label="录音制品" show-overflow-tooltip min-width="70" prop="s">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.s.value }}</template>
                        </el-table-column>
                        <el-table-column label="录像制品" show-overflow-tooltip min-width="70" prop="v">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.v.value }}</template>
                        </el-table-column>
                        <el-table-column label="视听" show-overflow-tooltip min-width="50" prop="t">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.t.value }}</template>
                        </el-table-column>
                        <el-table-column label="其他作品" show-overflow-tooltip min-width="80" prop="l">
                            <template slot-scope="scope">{
  { scope.row.anlaysisWorkTypeDTO.l.value }}</template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import {
     
    chars,
    border,
    styleBold1,
    styleBold2,
    styleBold3,
    styleText,
    styleHead,
    styleHeadDiagonal,
    saveAs,
    getCharCol,
    s2ab,
} from "@/assets/js/statisticsReport.js";
import {
     
    getExcelVaules,
    transTable,
} from "@/assets/js/workRegisterExcel.js";
import FileSaver from "file-saver";
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";
export default {
     
    name: "",
    components: {
     },
    data() {
     
        return {
     
            tableData: [],
            sums: [],
            invoce_data: {
      project_name: "统计表" },
            wopts: {
     
                bookType: "xlsx",
                bookSST: true,
                type: "binary",
                cellStyles: true,
            },
            jsono: [
                {
     
                    登记情况: "统计表",
                    列头2: "",
                    列头3: "",
                    列头4: "",
                    列头5: "",
                    列头6: "",
                    列头7: "",
                    列头8: "",
                    列头9: "",
                    列头10: "",
                    列头11: "",
                    列头12: "",
                    列头13: "",
                    列头14: "",
                    列头15: "",
                    列头16: "",
                    列头17: "",
                    列头18: "",
                    列头19: "",
                    列头20: "",
                    列头21: "",
                    列头22: "",
                    列头23: "",
                },
                {
     
                    登记情况: "",
                    列头2: "",
                    列头3: "",
                    列头4: "",
                    列头5: "",
                    列头6: "",
                    列头7: "",
                    列头8: "",
                    列头9: "",
                    列头10: "",
                    列头11: "",
                    列头12: "",
                    列头13: "",
                    列头14: "",
                    列头15: "",
                    列头16: "",
                    列头17: "",
                    列头18: "",
                    列头19: "",
                    列头20: "",
                    列头21: "",
                    列头22: "",
                    列头23: "单元:件",
                },
                {
     
                    登记情况: "作品类别\n登记情况",
                    列头2: "",
                    列头3: "",
                    列头4: "总计(件)",
                    列头5: "文字",
                    列头6: "口述",
                    列头7: "音乐",
                    列头8: "戏剧",
                    列头9: "曲艺",
                    列头10: "舞蹈",
                    列头11: "杂技艺术",
                    列头12: "美术",
                    列头13: "工程设计图、产品设计图",
                    列头14: "建筑",
                    列头15: "摄影",
                    列头16: "电影",
                    列头17: "类电影",
                    列头18: "地图、示意图",
                    列头19: "模型",
                    列头20: "录音制品",
                    列头21: "录像制品",
                    列头22: "视听",
                    列头23: "其他作品",
                },
            ],
        };
    },
    created() {
     
        getExcelVaules(this);
    },
    mounted() {
      },
    methods: {
     
        arraySpanMethod({
       row, column, rowIndex, columnIndex }) {
     
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
     
                if (rowIndex === 0 && columnIndex === 0) {
     
                    return [3, 1];
                } else if (rowIndex === 0 && columnIndex === 1) {
     
                    return [1, 2];
                } else if (rowIndex === 1 && columnIndex === 1) {
     
                    return [1, 2];
                } else if (rowIndex === 2 && columnIndex === 1) {
     
                    return [1, 2];
                } else if (rowIndex === 3 && columnIndex === 0) {
     
                    return [6, 1];
                } else if (rowIndex === 3 && columnIndex === 1) {
     
                    return [1, 2];
                } else if (rowIndex === 4 && columnIndex === 1) {
     
                    return [5, 1];
                } else if (rowIndex === 4 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 5 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 6 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 7 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 8 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 9 && columnIndex === 0) {
     
                    return [6, 1];
                } else if (rowIndex === 9 && columnIndex === 1) {
     
                    return [1, 2];
                } else if (rowIndex === 10 && columnIndex === 1) {
     
                    return [5, 1];
                } else if (rowIndex === 10 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 11 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 12 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 13 && columnIndex === 2) {
     
                    return [1, 1];
                } else if (rowIndex === 14 && columnIndex === 2) {
     
                    return [1, 1];
                } else {
     
                    return [0, 0];
                }
            }
        },
        getSummaries(param) {
     
            const {
      columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
     
                if (index === 0) {
     
                    sums[index] = "总计受理量";
                    return;
                }
                if (index === 1 || index === 2) {
     
                    sums[index] = "";
                    return;
                }
                //受理状态累计总和
                let values;
                if (index == 3) {
     
                    values = data.map(function (item) {
     
                        if (item["columnName2"] == "受理") {
     
                            let obj = item[column.property];
                            if (obj) {
     
                                return obj;
                            } else {
     
                                return 0;
                            }
                        }
                    });
                } else {
     
                    values = data.map(function (item) {
     
                        console.log(column.property)
                        if (item["columnName2"] == "受理") {
     
                            let obj = item["anlaysisWorkTypeDTO"][column.property];
                            if (obj) {
     
                                return obj.value;
                            }
                        }
                    });
                }
                if (!values.every((value) => isNaN(value))) {
     
                    sums[index] = values.reduce((prev, curr) => {
     
                        const value = Number(curr);
                        if (!isNaN(value)) {
     
                            return prev + curr;
                        } else {
     
                            return prev;
                        }
                    }, 0);
                    sums[index] += "";
                } else {
     

                    sums[index] = "";
                }
            });
            this.sums = sums;
            return sums;
        },
        exportExcel(type) {
     
            let sums = this.sums;
            transTable(this);
            let json = this.jsono;
            var tmpdata = json[0];
            json.unshift({
     });
            var keyMap = []; //获取keys
            for (var k in tmpdata) {
     
                keyMap.push(k);
                json[0][k] = k;
            }
            var tmpdata = []; //用来保存转换好的json</