JQuery not resolving on handlebars template when downloading PDF with chrome-pdf recipe

Adrian Floor

We are currently exploring the use of jquery on some of our report templates to modify how certain fields in the report are displayed.

Using the handlebars engine and the chrome-pdf recipe.

We have a handlebars template where we input the report parameters and use this template to execute javascript to then render other report detail template files, which are also handlebars templates.

This is the javascript that we call from the report parameters template file, in order to render the report detail template files:

Firstly to render as HTML in browser

jsreport.renderAsync({
        template: {
          name: report,
          recipe: 'html',
        },
        data: {
          params
        }
      }).then((r) => $('#render-target').html(r.toString()))

Secondly to download as PDF

jsreport.download(`${report}-${commonParams.etFrom}-${commonParams.etTo}.pdf`, {
        template: {
          name: report
        },
        data: {
          params
        }
      })

In our report parameters template file we have a link reference to JQuery as follows:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

However, if we use JQuery in the report detail templates that get rendered, the report detail renders perfectly for the html rendering in the browser, but for the PDF download, JQuery does not resolve, we get this error from within the JSReport nodejs code running in the JSReport docker container.

We then tried to include the link reference to JQuery in the report detail templates as well, but this caused JQuery to load a second time, breaking the report parameters use of jquery.

Lastly, we tried including conditionally including JQuery scripts based on whether we are doing an HTML or PDF render.

if(isPdfDownload) {
        loadJavascriptToHeader("https://code.jquery.com/jquery-2.2.4.min.js");
    }

We then delayed the printing to PDF by setting waitForJS setting to true on the API side, as well as including the code snippet below on the template to allow the javascript to finish running, and also put our code behind a function that checks if JQuery has loaded yet:

setTimeout(function() {
        window.JSREPORT_READY_TO_START = true; //this will start the pdf printing
    }, 500);

    function checkJqueryHasLoadedThenUse() {
        if(typeof jQuery == 'function') {
            //... our report specific code here
            return;
        } 
        else {
            timeout(checkJqueryHasLoadedThenUse(), 10)
        }
    }
    
    checkJqueryHasLoadedThenUse();

However, we got the errors in JSReport nodejs docker container again, saying that JQuery could not be resolved.

Would appreciate if anyone could give some ideas on how to troubleshoot or how to do this differently?

bjrmatos

@Adrian-Floor hi!

hmm interesting, can you upload to the playground the template that is able to run as html just fine but has issues when running as pdf?

Adrian Floor

Hello @bjrmatos I have uploaded the code to playground:

https://playground.jsreport.net/w/adrian.floor/5eeUtvf0

I will appreciate your assistance

bjrmatos

it should work now, with these changes, please import the zip into your server

0_1628533956613_export.zip

i have changed the following files js/helper-functions.js, scripts/report-1.4, report-1.4 so make sure to check them

Adrian Floor

Thank you very much for the assistance @bjrmatos ,

I imported the changes to my server, and I also updated the playground, however I am getting a "504 Gateway Time-out" error. When I examine the error on the API side I get the following:

Page error: RangeError: Maximum call stack size exceeded

at checkJqueryHasLoadedThenUse (http://localhost:5488/assets/content/helper-functions.js:65:37)

at checkJqueryHasLoadedThenUse (http://localhost:5488/assets/content/helper-functions.js:73:20)

bjrmatos

in playground is not working directly because it needs some changes there to work, specifically it needs to change loadJavascriptToHeader("https://localhost:5488/... to loadJavascriptToHeader("https://playground.jsreport.net/w/bjrmatos/ORTo50El...

see the playground attached, now i see it works there, however sometimes i see that it also fails, but it is probably because the jquery plugins does not load in order, you need to implement some logic that wait and loads the libs sequentially i guess, because the issue here is the network race condition, you can make an idea on how to implement such thing with the code in the playground, it just need more tweaks but i guess it is not hard to figure it out.

https://playground.jsreport.net/w/bjrmatos/ORTo50El

Adrian Floor

Thank you @bjrmatos for your assistance