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

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

  • J

    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

    0
  • J

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

    0
Log in to reply
 

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