If you need to download a PDF file (stream) from your web service, there are a couple of key things to do.
Make sure you use the responseType property of the RequestOptions object (I'm using TypeScript here). You need to set this property to ResponseContentType.Blob (an enum from @angular/http)
Code snippet
// Depending on what you are sending to the server
// and what the server is sending back
let headers = new Headers({
'Content-Type': 'application/json',
'Accept', 'application/pdf'
});
let options = new RequestOptions({ headers: headers });
// Ensure you set the responseType to Blob.
options.responseType = ResponseContentType.Blob;
Then, we will use the new Blob object in HTML5 to handle the response. To do this, create a new Blob using the response.blob() function in your map() function.
this.http
.post(url, body, options)
.map(response) => {
// Removed checking of valid response
...
let fileBlob = response.blob();
let blob = new Blob([fileBlob], {
type: 'application/pdf' // must match the Accept type
});
...
})
Finally, use the saveAs() function of HTML5 to create the file on the client. Due to browser support, it is best to use the FileSaver JavaScript library (npm install file-saver, npm install @types/file-saver)
Don't forget to import it
...
import * as FileSaver from 'file-saver';
...
Then just use it after you have created the Blob.
...
let filename = 'mypdf.pdf';
FileSaver.saveAs(blob, filename);
...
Done.
