What specific modifications are necessary in order for an Angular 2 / 4 application to successfully load a PDF file from a RESTful http call into the web browser?
It's important to note that the app being referred to extends http to include a JWT in http requests. As mentioned on this link, extending http in this manner can lead to issues related to overriding RequestOptions.
THE DETAILS:
A backend API effectively serves the desired PDF when users enter
http://192.168.1.5:4000/whitepaper.pdfThe code snippet for the Angular application is shown below:
my.service.ts
getAll() {
console.log('Inside getAll!');
return this.http.get('http://192.168.1.5:4000/whitepaper.pdf').map((response: Response) => response.blob())
.catch((err:Response) => {
console.log('Error block!');
return Observable.throw('error!');
});;
}
my.component.ts
getPDF() {
console.log('Hey there, Jackass!');
console.log(JSON.parse(localStorage.getItem('currentUser')).token);
let myblob = new Blob([this.pDFService.getAll()], { type: 'application/pdf' });
console.log(myblob.type);
console.log(myblob.size);
var fileURL = URL.createObjectURL(myblob);
window.open(fileURL); // if you want to open it in new tab
}
myblob.type displays as application/pdf, while myblob.size shows 15.
The backend API is built with Node.js/Express.
The Angular code example is retrieved from this answer, but it does not function correctly in the present scenario.
The code for custom-http.ts can be found at this link. The provided link mentions potential complications that may arise when http is overridden as seen in the current application.