Browser stucked and not responding while rendering 5000 table rows in chrome-pdf



  • jsreport.config.json :

    {
      "httpPort": 3333,
      "store": {
        "provider": "fs"
      },
      "blobStorage": {
        "provider": "fs"
      },
      "logger": {
        "console": {
          "transport": "console",
          "level": "debug"
        }
      },
      "allowLocalFilesAccess": false,
      "reportTimeout": 600000,
      "templatingEngines": {
        "strategy": "http-server"
      },
      "extensions": {
        "authentication": {
          "cookieSession": {},
          "admin": {
            "username": "admin",
            "password": "password"
          },
          "enabled": false
        },
        "scripts": {
          "strategy": "http-server"
        }
      }
    }
    

    TEMPLATE:

    <style>
    {#asset gridTemplate.css @encoding=utf8}
    </style>
    {{if data}}
    	{{if drillDownPfdHearder.length }}
    		<ul class="drillHeader p-2 ">
    			{{for drillDownPfdHearder}}
    				<li><span class="font-Bold">{{:tabLabel}} :</span> {{:tabName}}</li>
    			{{/for}}
    		</ul>
    	{{/if}}
    	<div class="d-flex w-100">
    		<table style="width: {{:tableWidth}}%" class="table table-bordered">
    			<thead>
    				{{for columnHeaderslst}}
    					<tr >
    						{{for : }}
    							<th scope="col" style="{{if colspan <= 1}}width: {{:columnWidth}}%{{/if}}" rowspan="{{:rowspan}}" colspan="{{:colspan}}">{{:caption}}</th>
    						{{/for}}
    					</tr>
    			{{/for}}
    			</thead>
    			<tbody>
    				{{for gridDataSet}}
    					<tr>
    						{{for : }}
    							<td class="{{:class}}">{{:value}}</td>
    						{{/for}} 
    					</tr>
    				{{/for}} 
    			</tbody>
    		</table>			
    	</div>
    {{else}}
    	<div class="d-flex justify-content-center font-18">
    		No Records Found
    	</div>
    {{/if}}
    


  • Please elaborate... Does it work with fewer rows?
    What does it mean browser hanged, do you invoke the rendering from browser?
    Please share the jsreport server logs.



  • Yeah it is work with the fewer rows. But more than 5000 rows the browser is stuck and not responding. yes, i invoked the rendering from browser.

    log Details:

    Microsoft Windows [Version 6.1.7601]
    Copyright (c) 2009 Microsoft Corporation. All rights reserved.

    C:\Users\admin>D:

    D:>cd jsreport_sample

    D:\jsreport_sample>cd JSREPORT_NPM

    D:\jsreport_sample\JSREPORT_NPM>jsreport start
    2021-03-31T06:34:26.245Z - info: Initializing jsreport@2.11.0 in development mod
    e using configuration file: jsreport.config.json
    2021-03-31T06:34:26.249Z - info: Searching for available extensions in D:\jsrepo
    rt_sample\JSREPORT_NPM
    2021-03-31T06:34:26.271Z - info: Extensions location cache contains up to date i
    nformation, skipping crawling in D:\jsreport_sample\JSREPORT_NPM
    2021-03-31T06:34:26.297Z - info: Found 35 extensions
    2021-03-31T06:34:27.025Z - debug: Writing extension locations cache to C:\Users
    admin\AppData\Local\Temp\jsreport\core\locations.json
    2021-03-31T06:34:27.027Z - debug: Discovered 35 extensions
    2021-03-31T06:34:27.119Z - info: Setting http-server strategy for rendering
    2021-03-31T06:34:27.377Z - debug: Extension authentication@2.6.1 is disabled, sk
    ipping
    2021-03-31T06:34:27.378Z - info: Using extension cli@2.2.5
    2021-03-31T06:34:27.401Z - info: Using extension debug@2.1.3
    2021-03-31T06:34:27.416Z - info: Using extension express@2.8.1
    2021-03-31T06:34:27.990Z - info: Using extension freeze@2.0.0
    2021-03-31T06:34:27.993Z - info: Using extension handlebars@2.1.0
    2021-03-31T06:34:28.002Z - info: Using extension import-export@2.1.1
    2021-03-31T06:34:28.213Z - info: Using extension jsrender@2.1.1
    2021-03-31T06:34:28.214Z - info: Using extension tags@2.5.0
    2021-03-31T06:34:28.218Z - info: Using extension templates@2.4.0
    2021-03-31T06:34:28.224Z - info: Using extension authorization@2.4.0
    2021-03-31T06:34:28.240Z - debug: Extension authorization@2.4.0 was disabled
    2021-03-31T06:34:28.241Z - info: Using extension base@2.0.2
    2021-03-31T06:34:28.243Z - info: Using extension browser-client@2.2.2
    2021-03-31T06:34:28.255Z - info: Using extension child-templates@1.4.0
    2021-03-31T06:34:28.274Z - info: Using extension chrome-pdf@1.10.0
    2021-03-31T06:34:28.548Z - debug: Chrome strategy is dedicated-process
    2021-03-31T06:34:28.549Z - info: Using extension data@2.4.0
    2021-03-31T06:34:28.551Z - info: Using extension docx@2.9.0
    2021-03-31T06:34:28.557Z - info: Using extension fs-store@2.9.1
    2021-03-31T06:34:29.075Z - info: Using extension licensing@2.2.3
    2021-03-31T06:34:29.081Z - info: Using extension pdf-utils@1.10.1
    2021-03-31T06:34:29.389Z - info: Using extension pptx@0.7.0
    2021-03-31T06:34:29.406Z - info: Using extension reports@2.5.1
    2021-03-31T06:34:29.426Z - info: Using extension static-pdf@0.4.0
    2021-03-31T06:34:29.443Z - info: Using extension studio@2.10.1
    2021-03-31T06:34:29.652Z - debug: studio request logs are enabled (flush interva
    l: 2000)
    2021-03-31T06:34:29.655Z - info: Using extension text@2.0.0
    2021-03-31T06:34:29.660Z - info: Using extension version-control@1.6.0
    2021-03-31T06:34:30.003Z - info: Using extension assets@1.7.0
    2021-03-31T06:34:30.026Z - info: Using extension html-to-xlsx@2.8.3
    2021-03-31T06:34:31.338Z - info: html-to-xlsx detected chrome as available html
    engine
    2021-03-31T06:34:31.339Z - info: Using extension scheduling@2.5.0
    2021-03-31T06:34:31.483Z - info: Using extension scripts@2.6.0
    2021-03-31T06:34:31.493Z - info: Using extension studio-theme-dark@0.3.0
    2021-03-31T06:34:31.503Z - info: Using extension xlsx@2.5.0
    2021-03-31T06:34:32.023Z - info: Using extension public-templates@2.2.0
    2021-03-31T06:34:32.025Z - debug: Extension public-templates@2.2.0 was disabled
    2021-03-31T06:34:32.025Z - info: Using extension resources@2.1.0
    2021-03-31T06:34:32.027Z - info: Using extension sample-template@2.6.1
    2021-03-31T06:34:32.036Z - info: Using general timeout for rendering (reportTime
    out: 600000)
    2021-03-31T06:34:32.036Z - info: Using fs provider for template store.
    2021-03-31T06:34:32.045Z - info: fs store is persisting using fs
    2021-03-31T06:34:32.047Z - info: fs store is synchronizing using fs
    2021-03-31T06:34:32.069Z - info: fs store is loading data
    2021-03-31T06:34:32.201Z - debug: fs store sync is configured to use polling for
    files watcher
    2021-03-31T06:34:32.249Z - info: fs store is initialized successfully
    2021-03-31T06:34:32.258Z - debug: studio default theme is: light
    2021-03-31T06:34:32.269Z - info: Creating default express app.
    2021-03-31T06:34:32.398Z - info: jsreport server successfully started on http po
    rt: 3333
    2021-03-31T06:34:32.400Z - info: fs store emits sockets to synchronize underlyin
    g changes with studio
    2021-03-31T06:34:32.469Z - info: Verifying license key free
    2021-03-31T06:34:33.578Z - info: Using enterprise trial license
    2021-03-31T06:34:33.583Z - debug: Creating samples is disabled
    2021-03-31T06:34:33.585Z - info: reporter initialized
    2021-03-31T06:34:39.136Z - debug: OData query on templates
    2021-03-31T06:34:39.139Z - debug: OData query on folders
    2021-03-31T06:34:39.148Z - debug: OData query on tags
    2021-03-31T06:34:39.149Z - debug: OData query on data
    2021-03-31T06:34:39.155Z - debug: OData query on assets
    2021-03-31T06:34:39.164Z - debug: OData query on scripts
    2021-03-31T06:34:39.166Z - debug: OData query on xlsxTemplates
    2021-03-31T06:34:39.173Z - debug: OData query on schedules
    2021-03-31T06:34:39.184Z - debug: OData query on settings
    2021-03-31T06:34:39.308Z - debug: OData query on templates
    2021-03-31T06:35:21.972Z - info: Starting rendering request 1 (user: null)
    2021-03-31T06:35:21.976Z - info: Rendering template { name: gridhtml, recipe: ht
    ml-with-browser-client, engine: jsrender, preview: false }
    2021-03-31T06:35:21.978Z - debug: Inline data specified.
    2021-03-31T06:35:21.979Z - debug: Resources not defined for this template.
    2021-03-31T06:35:21.983Z - debug: Base url not specified, skipping its injection
    .
    2021-03-31T06:35:21.992Z - debug: Replaced assets ["gridTemplate.css"]
    2021-03-31T06:35:21.993Z - debug: Rendering engine jsrender using http-server st
    rategy
    2021-03-31T06:35:23.168Z - debug: Compiled template not found in the cache, comp
    iling
    2021-03-31T06:35:23.211Z - debug: Executing recipe html-with-browser-client
    2021-03-31T06:35:23.248Z - debug: Skipping pdf utils processing because template
    is rendered with non-pdf recipe.
    2021-03-31T06:35:23.250Z - info: Rendering request 1 finished in 1278 ms
    2021-03-31T06:35:23.251Z - debug: Skipping storing report.
    2021-03-31T06:36:04.788Z - debug: OData update on templates
    2021-03-31T06:36:04.834Z - debug: OData query on templates
    2021-03-31T06:36:06.111Z - debug: OData query on templates
    2021-03-31T06:36:16.934Z - info: Starting rendering request 2 (user: null)
    2021-03-31T06:36:16.958Z - info: Rendering template { name: gridhtml, recipe: ch
    rome-pdf, engine: jsrender, preview: false }
    2021-03-31T06:36:16.960Z - debug: Inline data specified.
    2021-03-31T06:36:16.960Z - debug: Resources not defined for this template.
    2021-03-31T06:36:16.986Z - debug: Base url not specified, skipping its injection
    .
    2021-03-31T06:36:16.991Z - debug: Replaced assets ["gridTemplate.css"]
    2021-03-31T06:36:16.992Z - debug: Rendering engine jsrender using http-server st
    rategy
    2021-03-31T06:36:17.730Z - debug: Taking compiled template from engine cache
    2021-03-31T06:36:17.780Z - debug: Executing recipe chrome-pdf
    2021-03-31T06:36:18.411Z - debug: Converting with chrome HeadlessChrome/79.0.394
    5.0 using dedicated-process strategy
    2021-03-31T06:36:19.881Z - debug: Page request: GET (document) file:///C:/Users/
    admin/AppData/Local/Temp/jsreport/autocleanup/78b7b8e9-9118-49ad-a201-791c452c69
    04-chrome-pdf.html
    2021-03-31T06:36:29.972Z - debug: Page request finished: GET (document) file:///
    C:/Users/admin/AppData/Local/Temp/jsreport/autocleanup/78b7b8e9-9118-49ad-a201-7
    91c452c6904-chrome-pdf.html
    2021-03-31T06:36:30.747Z - debug: Running chrome with params {"printBackground":
    false,"landscape":false,"pageRanges":"","marginBottom":"2cm","marginTop":"3cm","
    displayHeaderFooter":false,"scale":null,"mediaType":"print","format":"","width":
    "","height":"","marginRight":"1cm","marginLeft":"1cm","waitForJS":false,"margin"
    :{"top":"3cm","right":"1cm","bottom":"2cm","left":"1cm"}}
    2021-03-31T06:44:09.977Z - info: pdf-utils is starting pdf processing
    2021-03-31T06:44:31.396Z - debug: pdf-utils detected 1 pdf operation(s) to proce
    ss
    2021-03-31T06:44:31.404Z - debug: pdf-utils running pdf operation merge
    2021-03-31T06:44:31.440Z - info: Starting rendering request 3 (user: null)
    2021-03-31T06:44:31.443Z - info: Rendering template { name: header-footer, recip
    e: chrome-pdf, engine: jsrender, preview: false }
    2021-03-31T06:44:31.444Z - debug: Inline data specified.
    2021-03-31T06:44:31.444Z - debug: Resources not defined for this template.
    2021-03-31T06:44:31.463Z - debug: Base url not specified, skipping its injection
    .
    2021-03-31T06:44:31.492Z - debug: Replaced assets ["header-footer.css","logo-log
    in.png","clientLogo.png"]
    2021-03-31T06:44:31.493Z - debug: Rendering engine jsrender using http-server st
    rategy
    2021-03-31T06:44:50.901Z - debug: Compiled template not found in the cache, comp
    iling
    2021-03-31T06:44:51.378Z - debug: Executing recipe chrome-pdf
    2021-03-31T06:44:56.077Z - debug: Converting with chrome HeadlessChrome/79.0.394
    5.0 using dedicated-process strategy
    2021-03-31T06:44:58.366Z - debug: Page request: GET (document) file:///C:/Users/
    admin/AppData/Local/Temp/jsreport/autocleanup/d63576d2-c1d9-462b-b537-20127e0fbc
    dc-chrome-pdf.html
    2021-03-31T06:44:58.457Z - debug: Page request: GET (image) data:image/png;base6
    4,iVBORw0KGgoAAAANSUhEUgAAAvIAAAEMCAYAAACm61K4AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAA
    ...
    2021-03-31T06:44:58.513Z - debug: Page request finished: GET (image) 200 data:im
    age/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvIAAAEMCAYAAACm61K4AAAABGdBTUEAALGOfPtRk
    wAAACBjSFJNAA...
    2021-03-31T06:44:58.514Z - debug: Page request: GET (image) data:image/png;base6
    4,iVBORw0KGgoAAAANSUhEUgAAASwAAABsCAYAAADQUo+tAAAACXBIWXMAAC4jAAAuIwF4pT92AAAKT2
    ...
    2021-03-31T06:44:58.514Z - debug: Page request finished: GET (image) 200 data:im
    age/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABsCAYAAADQUo+tAAAACXBIWXMAAC4jAAAuI
    wF4pT92AAAKT2...
    2021-03-31T06:45:05.067Z - debug: Page request finished: GET (document) file:///
    C:/Users/admin/AppData/Local/Temp/jsreport/autocleanup/d63576d2-c1d9-462b-b537-2
    0127e0fbcdc-chrome-pdf.html
    2021-03-31T06:45:05.268Z - debug: Running chrome with params {"printBackground":
    false,"width":"","landscape":false,"format":"","mediaType":"print","height":"","
    marginBottom":"","marginRight":"1cm","marginLeft":"1cm","marginTop":"","scale":n
    ull,"margin":{"top":"","right":"1cm","bottom":"","left":"1cm"}}
    2021-03-31T06:45:10.543Z - info: Rendering request 3 finished in 39103 ms
    2021-03-31T06:45:10.544Z - debug: Skipping storing report.
    2021-03-31T06:45:15.720Z - debug: pdf-utils postproces start
    2021-03-31T06:45:15.723Z - debug: pdf-utils postproces end
    2021-03-31T06:45:15.739Z - info: pdf-utils pdf processing was finished
    2021-03-31T06:45:15.745Z - info: Rendering request 2 finished in 538811 ms
    2021-03-31T06:45:15.746Z - debug: Skipping storing report.

    Finally, the report never rendered.



  • Based on the server log, the report finished rendering after ~9 minutes.
    I don't know how are you handling the rendering from the client-side in the browser.
    Maybe it fails to display such a big document.



  • Thanks for ur reply...

    I'm rendered by using the jsreport browser Client.

    let request = {
                  template: {
                    "shortid": objData.groupingReport ? this.orientation ? "qzy1bZ0a7a" : "bRxLQHSj1t" :
                      this.orientation ? "I1pmHx-Z-L" : "HIseNIH5dr",
                    "pdfMeta": {
                      "title": this.maintainData['title']
                    }
                  },
                  data: {
                    "title": this.maintainData['title'],
                    "columnHeaderslst": !isNullOrUndefined(objData) ? objData.colArrayHeader : '',
                    "gridDataSet": objData.groupingReport ? gArr : arr,
                    "formValue": !isNullOrUndefined(this.filterForm) ? this.filterForm.getRawValue() : {},
                    "dateVal": filterPrompt,
                    "tableWidth": !isNullOrUndefined(widthFlag) ? widthFlag : '',
                    "data": dataAvailable,
                    "drillDownPfdHearder": drillDownPfdHearder,
                    "maker": localStorage.getItem('User_Name'),
                    "clientImg": true
                  }
                };
    
    jsreport.renderAsync(request).then(function (res) {
                    let placeholder = document.getElementById('reportPlaceholder')
                    let iframe = document.createElement('iframe');
                    iframe.src = res.toDataURI();
                    iframe.style.width = '100%'
                    iframe.style.height = '100%'
                    while (placeholder.firstChild) {
                      placeholder.removeChild(placeholder.firstChild);
                    }
                    placeholder.appendChild(iframe);
                  }).catch(function (err) {
    console.log(err)
    })
    


  • Please check this in the documentation.
    https://jsreport.net/learn/browser-client#large-report-file
    Browsers have problems handling big URI. Look on the toObjectURL or toBlob.


Log in to reply
 

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