Unable to download csv and pdf Async

karanamavinash

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.

bjrmatos

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

karanamavinash

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

bjrmatos

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')
});

karanamavinash

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.

bjrmatos

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)

karanamavinash

Could you please help me with that code.

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

bjrmatos

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()
}

karanamavinash

Thank you so much,
Bjrmatos.