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



  • 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:

    1. Firstly to render as HTML in browser
    jsreport.renderAsync({
            template: {
              name: report,
              recipe: 'html',
            },
            data: {
              params
            }
          }).then((r) => $('#render-target').html(r.toString()))
    
    1. 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?


  • administrators

    @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?


Log in to reply
 

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