Calculation/app/view/payment/detail.ejs

<script type="text/javascript" src="/public/jspdf/jspdf.min.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_public.js"></script>
<script type="text/javascript" src="/public/js/common_ajax.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output_value_define.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_signature.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_move_signature.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_jspdf.js"></script>

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div><a href="payment-approval-detail.html"><i class="fa fa-chevron-left mr-2"></i></a>土建01标 / 报表2 / YFK 003</div>
            <div>
                <a href="#add-lot" data-toggle="modal" data-target="#add-lot" class="btn btn-sm btn-warning pull-right">审批退回</a>
                <a href="#add-lot" data-toggle="modal" data-target="#add-lot" class="btn btn-sm btn-success pull-right mr-2">审批通过</a>
                <a href="#add-lot" data-toggle="modal" data-target="#add-lot" class="btn btn-sm btn-primary pull-right mr-2">上报审批</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="row m-0 mt-3">
                    <div class="col-6">
                        <form>
                            <h5>表头内容</h5>
                            <div class="form-group">
                                <label>编号：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>合同号：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>工程名称：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>项目公司名称：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>合同价款：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>已付价款：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>结算价款：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <h5>表单内容</h5>
                            <div class="form-group">
                                <label>单位名称：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>申请内容及金额：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>开票或者收据编号：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>开户银行：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>账号：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>联系电话：</label>
                                <input type="text" class="form-control form-control-sm" placeholder="请输入">
                            </div>
                        </form>
                    </div>
                    <div class="col-6">
                        <div class="d-flex flex-row">
                            <a href="#" class="mr-2" >刷新</a>
                            <a href="javascript: void(0);" class="mr-2"  onclick="auditRptPrintHelper.directPDF()">导出pdf</a>
                            <a href="javascript: void(0);" onclick="auditRptPrintHelper.directPrint()">打印</a>
                        </div>
                        <div align="center">
                            <canvas id="auditRptCanvas" height="1200" width="920"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let tesRpttData = JSON.parse(unescape('<%- escape(JSON.stringify(pageRst)) %>'));

    console.log(tesRpttData);

    const SCREEN_DPI = [];
    const PAGE_SHOW = {closeWaterMark: 1};
    const current_stage_status = -1;
    const VIEW_CANVAS = document.getElementById("auditRptCanvas");
    const CUST_CFG = {
        "fonts": [
            {
                "ID": "ReportTitle_Main",
                "Name": "宋体",
                "FontBold": "T",
                "FontHeight": 32,
                "FontItalic": "F",
                "CfgDispName": "表标题",
                "FontUnderline": "F"
            },
            {
                "ID": "Column",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "列标题",
                "FontUnderline": "F"
            },
            {
                "ID": "Content",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "正文内容",
                "FontUnderline": "F"
            },
            {
                "ID": "Total",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "合计",
                "FontUnderline": "F"
            },
            {
                "ID": "Header",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "表眉/表脚",
                "FontUnderline": "F"
            }
        ],
        "margins": {
            "Top": 12,
            "Left": 15,
            "Right": 15,
            "Bottom": 15
        },
        "fillZero": false,
        "isNarrow": false,
        "borderThick": 2,
        "showVerticalLine": true,
        "closeWarterMark": false,
        "continuousOutput": true
    }

    let zTreeOprObj = {
        _chkPrePayStatus: function() {
            return -1;
        }
    };

    let rptTplObj = {
        pdfFont: {'SmartSimsun': [], 'simhei': [], 'simkai': []},
        isLoading: false,
    };

    let auditRptPrintHelper = {
        currentPageData: null,
        currentDownloadIdx: 0,
        showPage: function() {
            JpcCanvasOutput.cleanCanvas(VIEW_CANVAS);
            JpcCanvasOutput.drawPageBorder(tesRpttData, VIEW_CANVAS, getScreenDPI());
            JpcCanvasOutput.drawToCanvas(tesRpttData, VIEW_CANVAS, 1);
        },
        directPrint: function() {
            sessionStorage.report_direct_data = JSON.stringify(tesRpttData);
            sessionStorage.closeWaterMark = 1;
            sessionStorage.pageSize = 'A4';
            window.open('/printReport/A4');
        },
        directPDF: function() {
            if (rptTplObj.pdfFont['SmartSimsun'].length === 2) {
                downloadPDFReport([tesRpttData], 'A4', ['测试审核表'], [], [], [-1], []);
            } else {
                dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-normal2.js', 'normal', getPdfFontCallback);
                dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-bold.js', 'bold', getPdfFontCallback);
            }
        },
    };
    $(document).ready(() => {
        autoFlashHeight();
        auditRptPrintHelper.showPage();
        iniPage();
    });
    function downloadPDFReport(pageDataArr, pageSize, rpt_names, signatureRelArr, signatureRelInfo, refRptTplIds, STAGE_AUDIT) {
        auditRptPrintHelper.currentDownloadIdx = 0;
        const private_download = function(newPageDataArr, new_rpt_names) {
            if (auditRptPrintHelper.currentDownloadIdx < newPageDataArr.length) {
                let singleSignatureRelArr = [];
                for (let rIdx = 0; rIdx < signatureRelInfo.length; rIdx++) {
                    let rptId = refRptTplIds[auditRptPrintHelper.currentDownloadIdx];
                    if (signatureRelInfo[rIdx].rpt_id === rptId) {
                        singleSignatureRelArr = signatureRelArr[rIdx]; // 有些报表可能没有签名
                        break;
                    }
                }
                let pageData = newPageDataArr[auditRptPrintHelper.currentDownloadIdx];
                let rptName = new_rpt_names[auditRptPrintHelper.currentDownloadIdx];
                auditRptPrintHelper.currentDownloadIdx++;
                JpcJsPDFHelper.outputAsPdf(pageData, pageSize, rptName, singleSignatureRelArr, STAGE_AUDIT); // 精确控制签名
                if (auditRptPrintHelper.currentDownloadIdx < newPageDataArr.length) setTimeout(private_download(newPageDataArr, new_rpt_names), 2000);
            }
        };
        // 导出PDF真实优化代码
        let picPaths = [], dummyPicAmt = 0, dummyCells = [], dupPicPath = [], dupPicCell = [];
        // 1. 先找有没有dummy
        for (let pageData of pageDataArr) {
            for (let page of pageData.items) {
                for (let dCell of page.signature_cells) {
                    if (dCell.signature_name.indexOf('dummy_pic') >= 0) {
                        let picIdx = picPaths.indexOf(dCell.path);
                        if (picIdx < 0) {
                            picPaths.push(dCell.path);
                            dummyCells.push(dCell);
                            dummyPicAmt++;
                        } else {
                            let dPicIdx = dupPicPath.indexOf(dCell.path);
                            if (dPicIdx < 0) {
                                dupPicPath.push(dCell.path);
                                dupPicCell.push([]);
                                dPicIdx = dupPicPath.length - 1;
                            }
                            dupPicCell[dPicIdx].push(dCell);
                        }
                    }
                }
            }
        }
        if (dummyPicAmt > 0) {
            // 2. 有则一个个请求下载图片，下载完后统一导出PDF
            $.bootstrapLoading.start();
            let handledAmt = 0, exceptionAmt = 0;
            for (let pIdx = 0; pIdx < dummyCells.length; pIdx++) {
                let dCell = dummyCells[pIdx];
                getBlobPublic(dCell.path).then(blob => {
                    if (blob === 'not found!') {
                        exceptionAmt++;
                        if ((handledAmt + exceptionAmt) === dummyPicAmt) {
                            $.bootstrapLoading.end();
                            private_download(pageDataArr, rpt_names);
                        }
                    } else {
                        let oFileReader = new FileReader();
                        oFileReader.onloadend = function (e) {
                            let base64 = e.target.result;
                            dCell.pic = base64;
                            handledAmt++;
                            let pPathIdx = dupPicPath.indexOf(dCell.path);
                            if (pPathIdx >= 0) {
                                for (let dupCell of dupPicCell[pPathIdx]) {
                                    dupCell.pic = base64;
                                }
                            }
                            // console.log(`已处理草图: ${handledAmt}`);
                            if ((handledAmt + exceptionAmt) === dummyPicAmt) {
                                $.bootstrapLoading.end();
                                private_download(pageDataArr, rpt_names);
                            }
                        };
                        oFileReader.readAsDataURL(blob);
                    }
                });
            }
        } else {
            // 3. 无则普通导出
            private_download(pageDataArr, rpt_names);
        }
        //*/
    }
    function iniPage() {
        dynamicLoadJs('/public/jspdf/Arial Narrow-normal.js');
        dynamicLoadJs('/public/jspdf/Arial Narrow-bold.js');
        dynamicLoadJs('/public/jspdf/Arial Narrow-italic.js');
        dynamicLoadJs('/public/jspdf/Arial Narrow-bolditalic.js');

        rptTplObj.isLoading = true;
        dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-normal2.js', 'normal', getPdfFontCallbackLight);
        dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-bold.js', 'bold', getPdfFontCallbackLight);
    }
    function getPdfFontCallbackLight(fontProperty) {
        rptTplObj.pdfFont['SmartSimsun'].push(fontProperty);
        if (rptTplObj.pdfFont['SmartSimsun'].length === 2) {
            rptTplObj.isLoading = false;
        }
    }
    function getPdfFontCallback(fontProperty) {
        if (rptTplObj.pdfFont['SmartSimsun'].length === 2) {
            downloadPDFReport([tesRpttData], 'A4', ['测试审核表'], [], [], [-1], []);
        }
    }
</script>