每周一个小组件

前言

实现功能：开发word文档生成lodop代码的插件（支持第三方word转html再用我这个插件生成lodop代码，包括画线），支持动态绑定值
因为上周接到一个任务说html的表格用lodop打印出来在客户那有样式错乱问题，公司以前解决这种问题是用lodop画线工具一字一线画出来的，我一看好家伙，十几个报表模板，都还挺复杂，如果纯画，那不是没时间摸鱼了🐕，索性我就开发了个插件来实现自动生成lodop画线工具，好家伙生产力直接提高90%以上，又可以愉快的摸鱼了（研究新技术）🐕。

效果展示

插件地址
如果有帮住到你提高生产力可以给我个star吗

线上地址

word生成lodop代码

1611217260703.gif

开发过程

思路：获取每个元素的坐标特殊处理

贴部分处理dom代码生成线，内容，坐标的代码

        //循环递归dom树
        domThree(node, array, fontZ, index) {
            let vmx = this
            let children = node.childNodes;
            vmx.strArrayCode = vmx.clArray(array)
            if (node && node.nodeType === 1) {
                let arr = []
                switch (node.tagName) {
                    case 'TABLE':
                        const boxBorder = node.getBoundingClientRect()
                        //顶部
                        let top_ = boxBorder.top
                        //左边距
                        let left_ = boxBorder.left
                        //宽
                        let width_ = boxBorder.width
                        //高 
                        let height_ = boxBorder.height
                        let strBoxBottomXOne = `LODOP.ADD_PRINT_LINE(${top_},${left_},${top_},${width_+left_},0,1);`
                        let strBoxBottomX = `LODOP.ADD_PRINT_LINE(${height_+top_},${left_},${height_+top_},${width_+left_},0,1);`
                        let strBoxRightY = `LODOP.ADD_PRINT_LINE(${height_+top_},${width_+left_},${top_},${width_+left_},0,1);`
                        array.push(strBoxBottomXOne, strBoxBottomX, strBoxRightY)
                        break;
                    case 'TD':
                        const boxBorderTd = node.getBoundingClientRect()
                        //顶部
                        let topSpanTd = boxBorderTd.top
                        //左边距         
                        let leftSpanTd = boxBorderTd.left
                        //宽
                        let widthSpanTd = boxBorderTd.width
                        //高 
                        let heightSpanTd = boxBorderTd.height
                        //内容
                        let strY = `LODOP.ADD_PRINT_LINE(${heightSpanTd+topSpanTd},${leftSpanTd},${topSpanTd},${leftSpanTd},0,1);`
                        let strX = `LODOP.ADD_PRINT_LINE(${heightSpanTd+topSpanTd},${leftSpanTd},${heightSpanTd+topSpanTd},${widthSpanTd+leftSpanTd},0,1);`
                        array.push(strY, strX)
                        break;
                    case 'FONT':
                        const boxBorderFont = node.getBoundingClientRect()
                        //顶部
                        let topSpanFont = boxBorderFont.top
                        //左边距         
                        let leftSpanFont = boxBorderFont.left
                        //宽
                        let widthSpanFont = boxBorderFont.width
                        //高 
                        let heightSpanFont = boxBorderFont.height
                        let dataProps = node.getAttribute("data-Props")
                        if (vmx.getCodeType == 'new' || vmx.getCodeType == 'mode') {
                            if (dataProps) {
                                let letProps = `let ${dataProps}=params.${dataProps};`
                                vmx.letPropsArray.push(letProps)
                                let dataPropsStr = `LODOP.ADD_PRINT_TEXT(${topSpanFont},${leftSpanFont},${widthSpanFont},${heightSpanFont},\`$\{${dataProps}}\`);`
                                //字体长度
                                fontZ.push(dataPropsStr)
                                //px 转 pt
                                let px = parseFloat(getComputedStyle(node).fontSize) || 15
                                let pt = px * 3 / 4
                                let fontFont = `LODOP.SET_PRINT_STYLEA(${fontZ.length},'FontSize',${pt});`
                                array.push(dataPropsStr, fontFont)
                            }
                        }
                        break;

下载lodop模板（根据你们自己开发的具体实现处理参数，我这只是个参考）

1611219451563.gif

模板内容

import {getLodop} from '@/util/LodopFuncs'

export const inspectionReport = (params) => {
    let LODOP = getLodop();
    printPage1(params, 0);
    LODOP.PREVIEW();
};

/**
 * 第一页内容
 * @param params
 */
function printPage1(params) {
    let bgbb=params.bgbb;
    let LODOP = getLodop();
    LODOP.ADD_PRINT_TEXT(46,237,336,19,'汽 车 用 液 化 天 然 气 气 瓶 定 期 检 验 报 告');
    LODOP.SET_PRINT_STYLEA(1,'FontSize',12);LODOP.ADD_PRINT_TEXT(81,291,228,20,'   报告编号：');
    LODOP.SET_PRINT_STYLEA(2,'FontSize',12);LODOP.ADD_PRINT_TEXT(81,419,80,20,`${bgbb}`);
    ...
}

以后会持续更新的...