每周一个小组件

前言

实现性能：开发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}`);    ...}

当前会继续更新的...