每周一個(gè)小組件

前言

實(shí)現(xiàn)功能：開(kāi)發(fā)word文檔生成lodop代碼的插件（支持第三方word轉(zhuǎn)html再用我這個(gè)插件生成lodop代碼，包括畫(huà)線），支持動(dòng)態(tài)綁定值
因?yàn)樯现芙拥揭粋€(gè)任務(wù)說(shuō)html的表格用lodop打印出來(lái)在客戶那有樣式錯(cuò)亂問(wèn)題，公司以前解決這種問(wèn)題是用lodop畫(huà)線工具一字一線畫(huà)出來(lái)的，我一看好家伙，十幾個(gè)報(bào)表模板，都還挺復(fù)雜，如果純畫(huà)，那不是沒(méi)時(shí)間摸魚(yú)了??，索性我就開(kāi)發(fā)了個(gè)插件來(lái)實(shí)現(xiàn)自動(dòng)生成lodop畫(huà)線工具，好家伙生產(chǎn)力直接提高90%以上，又可以愉快的摸魚(yú)了（研究新技術(shù)）??。

效果展示

插件地址
如果有幫住到你提高生產(chǎn)力可以給我個(gè)star嗎

線上地址

word生成lodop代碼

1611217260703.gif

開(kāi)發(fā)過(guò)程

思路：獲取每個(gè)元素的坐標(biāo)特殊處理

貼部分處理dom代碼生成線，內(nèi)容，坐標(biāo)的代碼

        //循環(huán)遞歸dom樹(shù)
        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
                        //內(nèi)容
                        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}}\`);`
                                //字體長(zhǎng)度
                                fontZ.push(dataPropsStr)
                                //px 轉(zhuǎn) 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模板（根據(jù)你們自己開(kāi)發(fā)的具體實(shí)現(xiàn)處理參數(shù)，我這只是個(gè)參考）

1611219451563.gif

模板內(nèi)容

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

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

/**
 * 第一頁(yè)內(nèi)容
 * @param params
 */
function printPage1(params) {
    let bgbb=params.bgbb;
    let LODOP = getLodop();
    LODOP.ADD_PRINT_TEXT(46,237,336,19,'汽 車(chē) 用 液 化 天 然 氣 氣 瓶 定 期 檢 驗(yàn) 報(bào) 告');
    LODOP.SET_PRINT_STYLEA(1,'FontSize',12);LODOP.ADD_PRINT_TEXT(81,291,228,20,'???報(bào)告編號(hào)：');
    LODOP.SET_PRINT_STYLEA(2,'FontSize',12);LODOP.ADD_PRINT_TEXT(81,419,80,20,`${bgbb}`);
    ...
}

以后會(huì)持續(xù)更新的...