基于excel.js 面向对象实现Excel的生成以及导出(完整表格·带图片）

2022/04/16最新更新

github链接: link
gitee链接: link

之前老的，代码不够清晰

效果如下

excel.js（生成Excel的json文件）

import ERPUtil from "./erpUtil";

const Excel = require('exceljs');

export class ERPExcelCell {
   

    row = null;
    key = null;

    block = null;

    excelCell = null;
    beMerged = false;
    value = null;

    // excel font
    font = {
    color: {
    'argb': 'FFFFFFFF' } };

    // excel fill
    fill = {
   
        type: 'pattern',
        pattern: 'darkTrellis',
        fgColor: {
    argb: "FF1890FF" },
        bgColor: {
    argb: 'FF1890FF' }
    };

    excelBorder = {
   
        top: {
    style: 'thin' },
        left: {
    style: 'thin' },
        bottom: {
    style: 'thin' },
        right: {
    style: 'thin' }
    };

    // excel text alignment
    alignment = {
   
        vertical: 'middle',
        horizontal: 'center',
        wrapText: true
    };

    // 默认td样式
    ui_defaultTdStyle = {
   
        border: '1px solid #ddd',
        verticalAlign: 'middle'
    };

    // td下文字样式
    ui_tdTextStyle = {
   
        height: '50px',
        minWidth: '100px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
    };

    // td图片样式
    ui_tdImgStyle = {
   
        width: '50px',
        height: '50px',
        display: 'block',
        margin: '0 auto',
    };

    // td URL样式
    ui_tdUrlStyle = {
   
        maxWidth: '100px',
        display: 'block',
        // height: '50px',
        // display: "-webkit-box",
        // webkitBoxOrient: 'vertical',
        // webkitLineClamp: '3',
        // overflow: 'hidden',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
    };

    constructor(props) {
   
        this.row = props.row;
    }

    get excelRow() {
   
        return this.row.excelRow;
    }

    get excelWorksheet() {
   
        return this.row.sheet.excelWorksheet;
    }

    get excelWorkbook() {
   
        return this.row.sheet.workbook.excelWorkbook;
    }

    get type() {
   
        if (this.isImage()) return 'img';
        if (this.isURL()) return 'url';
        return 'text';
    }

    get sheet() {
   
        return this.row.sheet;
    }

    get left() {
   
        return this.sheet.getCell(this.x - 1, this.y);
    }

    get right() {
   
        return this.sheet.getCell(this.x + 1, this.y);
    }

    get up() {
   
        return this.sheet.getCell(this.x, this.y - 1);
    }

    get down() {
   
        return this.sheet.getCell(this.x, this.y + 1);
    }

    get x() {
   
        return this.row.cells.indexOf(this);
    };

    get y() {
   
        return this.row.y;
    };

    isNeighbor = (cell) => {
   
        if (this === cell.left || this === cell.right || this === cell.up || this === cell.down) {
   
            return true;
        }
        return false;
    };

    toJSON = () => {
   
        return {
   
            x: this.x,
            y: this.y,
            value: this.value,
            key: this.key
        }
    };

    needShowMeAndBelow = () => {
   
        let ret = {
    yes: true, rowSpan: 1 };

        const up = this.up;
        if (!up) {
   
            ret.yes = true;
        }

        if (this.key && up && (up.key === this.key)) {
   
            ret.yes = false;
            return ret;
        }

        let cell = this.down;
        while (cell) {
   
            if (this.key && (cell.key === this.key)) {
   
                ret.rowSpan++;
            } else {
   
                break;
            }
            cell = cell.down;
        }

        return ret;
    };

    needShowMeAndRight = () => {
   
        let ret = {
    yes: true, colSpan: 1 };

        const left = this.left;
        if (!left) {
   
            ret.yes = true;
        }

        if (this.key && left && (left.key === this.key)) {
   
            ret.yes = false;
            return ret;
        }

        let cell = this.right;
        while (cell) {
   
            if (this.key && (cell.key === this.key)) {
   
                ret.colSpan++;
            } else {
   
                break;
            }
            cell = cell.right;
        }

        return ret;
    };

    mergeOneCell = (cell) => {
   
        if (cell && this.isNeighbor(cell)) {
   
            if (!this.key) this.key = ERPUtil.createUUID(); //随即创建一个UUID
            cell.key = this.key;
            if (!this.block) this.block = [this];
            if (cell.block) {
   
                ERPUtil.addArrayItems(this.block, cell.block);
            } else {
   
                ERPUtil.addArrayItem(this.block, cell);
            }
            cell.block = this.block;

            const key = this.block[0].key;
            for