New to JSReport with Angular 10

Wilson Chan Wilson Chan

i am using Angular 10 and would like to intergrade JSReport into my program to print report (pdf). For JSReport, i already setup the server and create a sample report and test it using 'postman', everything OK. and the Angular already download ( npm install jsreport-browser-client-dist ) and come out below code :

grdInvoiceMToolbarPrint() {
this.ProSvr.GetRpInvoice(this.AuthSvr.branchID, "INV5000000050").subscribe((rMsg: ResponseMessage) => {
  this.rpInvoice = [];
  this.rpInvoice = (rMsg.data as RpInvoice[]);

  const request = {
    'template': { "name": "invoice" },
    'data': JSON.stringify(this.rpInvoice)
  };

  
  //this.jsreport.serverUrl = this.ProSvr.urlReport;
  //this.jsreport.headers['Authorization'] = 'Basic ' + btoa('admin:password');

  // this.jsreport.renderAsync(request).then(function(res) {
  //   const 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>';
  //   const a = window.open('about:blank', 'Report');
  //   a.document.write(html);
  //   a.document.close();
  // });
  
  console.log(JSON.stringify(this.rpInvoice));
});

}
i have read the document https://jsreport.net/learn/browser-client , but do not mention anything. Up to this point, i cannot proceed due to the 'this.jsreport' is not defined, please help!

Wilson Chan Wilson Chan

finally i got the answer:

import * as jsReport from 'jsreport-browser-client-dist';
...
...
grdInvoiceMToolbarPrint() {
this.Svr.GetRpInvoice(this.AuthSvr.branchID, "INV5000000050").subscribe((rMsg: ResponseMessage) => {
this.rpInvoice = [];
this.rpInvoice = (rMsg.data as RpInvoice[]);

PpyMohan

Hi Wilson Chan

I am trying to develope angular application with jsreports. but i didn't find any material regarding this and i tried to install 'jsreport-browser-client-dist' from npm. when i import this to typescript file i import * as jsReport from 'jsreport-browser-client-dist'; got error ![alt text]( image url) could you please help me