Unable to download csv and pdf Async



  • Unable to download csv and pdf Async as i have large number of records to generate.

    However async viewing of the pdf is possible.

    I am using JSReport with my angular 7 application.

    Thanks in advance.


  • administrators

    for the start, what is the error that you get in browser when trying to download the report? also please share the code that you are using to download it, maybe there is a problem there too



  • For data more than 100 it showing error as follow:
    
    
    PayloadTooLargeError: too many parameters
    at queryparse (C:\clearview-js-report\node_modules\jsreport-express\node_modules\body-parser\lib\types\urlencoded.js:151:13)
    at parse (C:\clearview-js-report\node_modules\jsreport-express\node_modules\body-parser\lib\types\urlencoded.js:75:9)
    at C:\clearview-js-report\node_modules\jsreport-express\node_modules\body-parser\lib\read.js:121:18
    at invokeCallback (C:\clearview-js-report\node_modules\jsreport-express\node_modules\raw-body\index.js:224:16)
    at done (C:\clearview-js-report\node_modules\jsreport-express\node_modules\raw-body\index.js:213:7)
    at IncomingMessage.onEnd (C:\clearview-js-report\node_modules\jsreport-express\node_modules\raw-body\index.js:273:7)
    at IncomingMessage.emit (events.js:189:13)
    at endReadableNT (_stream_readable.js:1103:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    
    For data less than 100 jsreport.render function is working properly but when there are more records it showing the above error.
    
    To avoid the error I am using jsreport.renderAsync to load the PDF.
    
    Which works fine for Viewing, but the document cannot be downloaded.
    
    
    My angular 6 code:
    ***************************************
    RENDERING PDF.
    
    var request;
    
    jsreport.serverUrl = 'http://localhost:1000';
    
    var reportName = "Z-Report";
    
    request = {
      "data": {
        "items": this.tableList,
        "title": "Z report"
      },
      "template": { "shortid": rJbJkmeLE }
    };
    
    //For data more than 100 i am using Async to load the report 
    
      jsreport.renderAsync(request).then(function (res) {
        var html = '<html>' +
          '<style>html,body {padding:0;margin:0;} iframe {width:100%;height:100%;border:0}</style>' +
          '<body>' +
          '<iframe type="application/pdf" src="' + res.toDataURI() + '"></iframe>' +
          '</body></html>';
        var a = window.open("about:blank", "Report")
        a.document.write(html)
        a.document.close()
      })
      
      // for data less than 100 rescords 
      
      jsreport.render("_blank", request);
    

    This works fine for records less than 100, but the for more records its showing the same error as mentioned above.

    For downloading CSV

    var request;
    
    jsreport.serverUrl = 'http://localhost:1000';
    
    var reportName = "Z-Report";
    
    request = {
      "data": {
        "items": this.tableList,
        "title": "Z report"
      },
      "template": { "shortid": HJ_bJXxUE },
      "options":{ "Content-Disposition": "attachment; filename=" + reportName }
    };
    
      jsreport.render(request);
    

    This works fine for records less than 100, but the for more records its showing the same error as mentioned above.

      For downloading PDF 
    
    ********************************************************************
    
    var request;
    
    jsreport.serverUrl = 'http://localhost:1000';
    
    var reportName = "Z-Report";
    
    request = {
      "data": {
        "items": this.tableList,
        "title": "Z report"
      },
      "template": { "shortid": HJ_bJXxUE },
      "options":{ "Content-Disposition": "attachment; filename=" + reportName }
    };
    
      jsreport.download('myReport.pdf', request);
    

    Thanks in advance


  • administrators

    ok i see, this is expected, the .render sends the data as form parameters which has issues with large data, however as you already know you need to use .renderAsync method for such large data, renderAsync + download should work with code similar to this, have you tried?

    request = {
      "data": {
        "items": this.tableList,
        "title": "Z report"
      },
      "template": { "shortid": HJ_bJXxUE }
    }
    
    jsreport.renderAsync(request).then(function(res) {
      //open download dialog
      res.download('test.pdf')
    });
    


  • Thank you so much. This works absolutely fine.

    One last question.

    When the browser blocks the pop ups the renderAsync is not working to open the document in new tab..

    ERROR TypeError: Cannot read property 'document' of null.


  • administrators

    hmm i don't have a good solution for that, i guess you need to ensure that popups are enabled, for example you can show a custom error message when you get empty window (which means that the popup was not opened)



  • Could you please help me with that code.

    To know whether a pop up got opened or not.
    Thanks


  • administrators

    hmm well, since you have this code:

    var a = window.open("about:blank", "Report")
        a.document.write(html)
        a.document.close()
    

    and your error is this: ERROR TypeError: Cannot read property 'document' of null.

    i guess you can detect if the pop was not opened if a contains nothing, so i guess you can this:

    var a = window.open("about:blank", "Report")
    
    if (a == null) {
      // pop was not opened, show some message, i'm using just alert for the example
      aler('Pop ups are blocked, please make sure to enable them in order to check report preview')
    } else {
      a.document.write(html)
        a.document.close()
    }
    


  • Thank you so much,
    Bjrmatos.


Log in to reply
 

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