New to JSReport with Angular 10



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



  • 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[]);

    const request = {
    'template': { "name": "invoice" },
    'data': JSON.stringify(this.rpInvoice)
    };
    jsReport.serverUrl = this.Svr.urlReport;
    jsReport.renderAsync(request).then(function(res) {
    window.open(res.toDataURI())
    });
    });



  • 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](0_1640667358920_Untitled.png image url) could you please help me


Log in to reply
 

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