Display a PDF report in Anuglar app from jsreport backend

stormforce133

Hi!
I'm new here and it seems a nice forum!

I'm building an Angular app, and I've the jsreport service running in mi node backend (which also serves as the main CRUD backend for the app).

My current solution takes the desired data and generates the htttp post for the jsreport api which returns a response with the PDF file which is nice.
Now I want to display this PDF in a new windows (in the browser).
It's quite a difficult task since I can't find much neither in Google or Stack Overflow.
I've found that the Browser Client could do that... but I don't know how to import and use the browser client package (jsreport-browser-client-dist) inside my Angular service / component.

Thanks in advance!!

bjrmatos

hi! i think that the most easy way is to download this file and just put it in your page, you will have the "jsreport" global variable available to start using it. i don't know very much about angular but if you want to use the jsreport client in the "angularjs way" you will need to wrap some function calls in an angular service, but you don't need to do that if you are ok with calling the "jsreport" global variable directly.

stormforce133

Thanks for your response!
BTW it's Anuglar, not AngularJS.
I'm gonna try with the js file in the index page, but it should be loaded through Webpack

bjrmatos

yes, you also have the option to npm i jsreport-browser-client-dist and just make a require/import call in your favorite js bundler, so you should not have any problem there

stormforce133

The npm packages gives me a nodejs package... but it doesn't make a NgModule so I can't use it directly in Typescript inside a component. Maybe someone with more experience Angular could give me some guidance.

bjrmatos

yes, i'm not an Angular expert 😃

jsreport-browser-client-dist is exported as a UMD module, when called from webpack or browserify it will give you a commonjs module, how do you consume a UMD/commonjs module in Angular? seems like you are only having troubles because the way angular/typescript treat modules.. if it becomes difficult to make it work in the Angular way you can just add the script to your index page and consume it as a global 🙂

hopper08

stormforce133, would you be willing to give me a few pointers of how to use the api to send data from an angular app into jsreport? thx =)

ackzell

would you be willing to give me a few pointers of how to use the api to send data from an angular app into jsreport? thx =)

I am fairly new to jsreport, but I think I can give some ideas:

@hopper08 what you want to do is make sure you have the jsreport variable available globally (by installing it in any way BJR already already pointed to), then make sure that your request object has the data property in there, with the values you want to display on your output. After that, jsreport.renderAsync to make the AJAX call and wait for the response :)