header and footer are merged many times based on pages.length when use chrome-pdf recipe



  • I 'm upgrade from phantom-pdf recipe to chrome-pdf. Currently phantom-pdf and chrome-pdf will coexist.
    When I use chrome-pdf recipe to merge header and footer on dynamic content, the header and footer are merge many times when pages.length > 1. And parameter 'mergeWholeDocument' looks not working, could you please give me some prompt? Thank u!

    Here are the configuration below:

    1. main template config.json
    {
            "shortid": "spotlight_report",
            "__entitySet": "templates",
            "engine": "handlebars",
            "recipe": "phantom-pdf",  // Replace it to chrome-pdf in runtime
            "phantom": {  // This option does not be removed when running pdf, hope it does not effect the result
                "headerHeight": "80px",
                "footerHeight": "50px",
                "width": "1800",
                "height": "1350",
                "waitForJS": true,
                "viewportSize": {
                    "width": "1780",
                    "height": "1000"
                },
                "zoomFactor": "1.0"
            },
            "chrome": {
                "width": "1800",
                "height": "1350",
                "waitForJS": true,
                "marginTop": "3cm",
                "marginRight": "1cm",
                "marginLeft": "1cm",
                "marginBottom": "3cm"
            },
            pdfOperations: [{
                'templateShortid': 'header_footer',
                'renderForEveryPage': false,
                'mergeWholeDocument': true, // this parameter doesn't seem to work, whether it is true or false
                'type': 'merge'
            }]
    }
    
    1. main content.handlebars
    {{#if dataset.templates}}
        {{#each dataset.templates}}
            {#child SpotLightTemplatePie @options.index=0}   {{!-- here is a child template --}}
        {{/each}}
    {{/if}}
    
     {{!-- child template below  its recipe is html--}}
    
    div class="pdf-wrapper">
            {{#if spotlightReport.pie.chartSetting}}
                <div class="{{getClass spotlightReport.pie.chartSetting}}">
                    <div class="panel panel-default chartContainer">
                        <div class="panel-body">
                            <div class="chartBody" id="pieChart1_{{spotlightReport.index}}" style="width: 90%"></div>
                        </div>
                    </div>
                </div>
            {{/if}}
    </div>
    
    <script>
        var chartData = {{{toJSON spotlightReport.pie.chartSetting}}};
    
        if (chartData) {
            var chartConfig1 = convertHighchartDataFormat('pie', chartData);
            $("#pieChart1" + '_{{spotlightReport.index}}').highcharts(chartConfig1);
        }
    </script> 
    
     {{!-- child template config below--}}
    
    {
        "engine": "handlebars",
        "recipe": "html",
        "phantom": {},
        "scripts": [
            {
                "shortid": "SpotTpPie"
            }
        ],
        "shortid": "SpotTpPie",
        "modificationDate": {
            "$$date": 1479784499055
        },
        "_id": "SpotlightTemplatePie"
    }
    
    1. headerFooter config.json
    {
         "_id": "HeaderFooter",
         "shortid": "header_footer",
         "name": "Header-Footer",
         "recipe": "chrome-pdf",
         "engine": "handlebars",
         "chrome": {
            "width": "1800",
            "height": "1350",
            "marginTop": "1cm",
            "marginLeft": "1cm",
            "marginRight": "1cm",
            "marginBottom": "1cm"
         },
         "modificationDate": {
             "$$date": 1606823196385
         },
         "creationDate": {
             "$$date": 1606823196385
         },
         "__entityPath": "/headerFooter"
    }
    
    1. headerFooter content.handlebars
    {{#each $pdf.pages}}
        <div style="position: absolute;  top: 10px; width: 100%;">
            <div style="text-align: center;">
                <span class="pdf-header" style="font-size: 24px;"><b>{{@root.pdfName}}</b></span>
            </div>
        </div>
        <div style="position: absolute;  bottom: 10px; width: 100%;">
            <div style="float: right;">
                <span class="pdf-header">Page {{getPageNumber 0}} of {{getTotalPages ../$pdf.pages}}</span>
            </div>
        </div>
    {{/each}}
    

    Environment:

    node 12.6.0
    os: window10
    jsreport-core: 2.2.0
    

    Here is the pdf screenshot
    pdf header and footer screenshot

    Here is the log:

    ---------replace recipe to chrome----------
    info: Starting rendering request 11 (user: null)
    info: Rendering template { name: spotlightReport, recipe: chrome-pdf, engine: handlebars, preview: false }
    debug: Inline data specified.
    debug: Resources not defined for this template.
    debug: Executing script spotlightReport
    debug: Executing script spotlightReport
    debug: Base url not specified, skipping its injection.
    debug: Replaced assets ["jquery-1.10.1.min.js","bootstrap.css","bootstrap.min.js","../../../../client/shared/commonjs/highcharts.js","convertFormat.js","spotlightReport.css","Fonts Noto_Sans.ttf","Fonts Noto_Sans_Bold.ttf","Fonts Noto_Sans_Italic.ttf","Fonts Noto_Sans_Italic_Bold.ttf"]
    debug: Rendering engine handlebars
    debug: Compiled template not found in the cache, compiling
    SpotLightTemplatePie @options.index=0
    ___________________________________________________p1
    SpotLightTemplatePie @options.index=1
    ___________________________________________________p1
    SpotLightTemplatePie @options.index=2
    ___________________________________________________p1
    debug: Rendering child template SpotLightTemplatePie
    info: Starting rendering request 12 (user: null)
    debug: Rendering child template SpotLightTemplatePie
    info: Starting rendering request 13 (user: null)
    debug: Rendering child template SpotLightTemplatePie
    info: Starting rendering request 14 (user: null)
    info: Rendering template { name: SpotLightTemplatePie, recipe: html, engine: handlebars, preview: false }
    debug: Inline data specified.
    debug: Resources not defined for this template.
    info: Rendering template { name: SpotLightTemplatePie, recipe: html, engine: handlebars, preview: false }
    debug: Inline data specified.
    debug: Resources not defined for this template.
    info: Rendering template { name: SpotLightTemplatePie, recipe: html, engine: handlebars, preview: false }
    debug: Inline data specified.
    debug: Resources not defined for this template.
    debug: Executing script spotlightReport
    debug: Executing script spotlightReport
    debug: Executing script spotlightReport
    debug: Executing script SpotLightTemplatePie
    debug: Executing script SpotLightTemplatePie
    debug: Executing script SpotLightTemplatePie
    debug: Base url not specified, skipping its injection.
    debug: Rendering engine handlebars
    debug: Taking compiled template from engine cache
    debug: Executing recipe html
    debug: Skipping storing report.
    debug: Executing script anonymous
    info: Rendering request 12 finished in 15174 ms
    debug: Base url not specified, skipping its injection.
    debug: Rendering engine handlebars
    debug: Taking compiled template from engine cache
    debug: Executing recipe html
    debug: Skipping storing report.
    debug: Executing script anonymous
    info: Rendering request 14 finished in 15468 ms
    debug: Base url not specified, skipping its injection.
    debug: Rendering engine handlebars
    debug: Taking compiled template from engine cache
    debug: Executing recipe html
    debug: Skipping storing report.
    debug: Executing script anonymous
    info: Rendering request 13 finished in 17409 ms
    debug: Executing recipe chrome-pdf
    debug: fs store sync is triggering reload, because ~\reportserver\data\temp\autocleanup\ef91c972-8b40-486f-97ee-b6b2bcd4a126-chrome-pdf.html was changed by other process
    info: fs store is loading data
    debug: Chrome will wait for printing trigger
    debug: Running chrome with params {"width":"1800","height":"1350","waitForJS":true,"marginTop":"3cm","marginRight":"1cm","marginLeft":"1cm","marginBottom":"3cm","margin":{"top":"3cm","right":"1cm","bottom":"3cm","left":"1cm"}}
    info: pdf-utils is starting pdf processing
    debug: Detected 1 pdf operation(s) to process
    debug: Running pdf operation merge
    info: Starting rendering request 15 (user: null)
    info: Rendering template { name: headerFooter, recipe: chrome-pdf, engine: handlebars, preview: false }
    debug: Inline data specified.
    debug: Resources not defined for this template.
    debug: Executing script spotlightReport
    debug: Base url not specified, skipping its injection.
    debug: Replaced assets ["spotlightReport.css","Fonts Noto_Sans.ttf","Fonts Noto_Sans_Bold.ttf","Fonts Noto_Sans_Italic.ttf","Fonts Noto_Sans_Italic_Bold.ttf"]
    debug: Rendering engine handlebars
    debug: Taking compiled template from engine cache
    debug: Executing recipe chrome-pdf
    debug: fs store sync is triggering reload, because ~\reportserver\data\temp\autocleanup\bc3422b6-9904-40a2-b20d-ef60cff70f00-chrome-pdf.html was changed by other process
    info: fs store is loading data
    debug: Running chrome with params {"width":"1800","height":"1350","marginTop":"1cm","marginLeft":"1cm","marginRight":"1cm","marginBottom":"1cm","margin":{"top":"1cm","right":"1cm","bottom":"1cm","left":"1cm"}}
    debug: Skipping storing report.
    debug: Executing script anonymous
    info: Rendering request 15 finished in 1073 ms
    info: pdf-utils pdf processing was finished
    debug: Skipping storing report.
    debug: Executing script anonymous
    debug: Executing script anonymous
    debug: fs store sync is triggering reload, because ~\reportserver\data\settings was changed by other process
    info: fs store is loading data
    info: Rendering request 11 finished in 31227 ms
    2020-12-03 20:33:03.81 - debug: Mirroring 'sendPdfToUser' event to other node processes.
    

    I have tried to add a sample testcase on jsreport playground, but with no luck.
    Could anyone give me any help? Thank you! @JAN_BLAHA @BJRMATOS



  • Fixed it by installing packages, and it works well
    "jsreport-chrome-pdf": "=1.2.2",
    "jsreport-pdf-utils": "=1.2.1",


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.