每周一个小组件

前言

实现性能：开发 word 文档生成 lodop 代码的插件（反对第三方 word 转 html 再用我这个插件生成 lodop 代码，包含画线），反对动静绑定值
因为上周接到一个工作说 html 的表格用 lodop 打印进去在客户那有款式错乱问题，公司以前解决这种问题是用 lodop 画线工具一字一线画进去的，我一看好家伙，十几个报表模板，都还挺简单，如果纯画，那不是没工夫摸鱼了????，索性我就开发了个插件来实现主动生成 lodop 画线工具，好家伙生产力间接进步 90% 以上，又能够欢快的摸鱼了（钻研新技术）????。

成果展现

插件地址
如果有帮住到你进步生产力能够给我个 star 吗

线上地址

word 生成 lodop 代码

开发过程

思路：获取每个元素的坐标非凡解决

贴局部解决 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 模板（依据你们本人开发的具体实现解决参数，我这只是个参考）

模板内容

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}`);
    ...
}

当前会继续更新的 …