How to call a report via URL in Angular 6

[Khurram Bilal]

I am trying to work on the code in to make an HTTP call to a  Jasper report from Angular 6 code.

In .net there is HttpWebResponse and web client for making a http/rest call and add a header to the request, What module/service in Angular 6 can be used to do the same thing.


.Net code for reference

HttpWebRequest request = WebRequest.Create(URL ADDRESS)
request.Headers.Add(credentials)
request.Method = "GET";
request.ContentType = "text/xml";
HttpWebResponse response;
using (response = request.GetResponse() as HttpWebResponse)
{
// Get the response stream
StreamReader reader = new
StreamReader(response.GetResponseStream(), Encoding.UTF8);
StreamReader reader = new
StreamReader(response.GetResponseStream());
results = reader.ReadToEnd();
}

[Sander Elias]

Hi Knight,

HttpClient.get(url)

Loading html text isn't different from loading anything else.

Regards

Sander

[Knight]

Hi Sanders, 

What will be the code as i will need to add the user name/password to the header of the HTTP request to keep it secure. 

Thanks

[Sander Elias]

Hi Knight,

That's dictated by the server you are connecting to. So i can't really answer your question.

Regards

Sander

[Knight]

Hi,

I meant the angular code or any reference you can suggest that i can see as an example on how to add headers to the request...

[Sander Elias]

Hi Knight,

You mean something like this: https://angular.io/tutorial/toh-pt6#add-heroserviceupdatehero ?

[f-end]

https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

for adding basic auth/ username password you need to add 
 header manually:

headers.append("Authorization", "Basic " + btoa("username:password"));

[Knight]

Hello Sanders

This is the url which returns a report if we paste the url in the browser. 

http://SERVERADDRESS/jasperserver-pro/rest_v2/reports/REPORT.PDF?PARAM1=VALUE&PARAM2=VALUE

To program this, i plan to use angular as front end to open a pop up and allow the user to input the 2 values. then the entered values can be replaced in the URL.

Now we need to call the URL with angular code as you have suggested below. The question is since it is immediate response after the url is hit, can we not use observable and if there is a straight forward way(which is similar to http client in .net) Or  this is the only way possible in Angular?

Thank you for your help and time

[Sander Elias]

Hi Knight,

So the report is a PDF file generated by your server?
What is it you are trying to do with it? Let the client download, or show on screen?
if its a PDF, you need to convert it back to file object using a BLOB, and then put it in a iframe, or make it available for download by putting it into a <a [src]="generatedFIle">download</a>

Regards
Sander

​

[Knight]

Hi,

Its a jasper report (similar to msft ssrs reports). The Jasper Api allows to call via the url i have shared below in order to get the pdf version of the report. 

Currently when i paste the url in browser, it shows me PDF report displayed in the browser.

Now i need to put the code together(which i am trying to confirm that- Will http method combined with Observable) will work in angular; so that when the response comes back from the URL it should display in IFRAM/New Tab as PDF as above. 

Thanks