I am working on an Angular 9 web application, where in one of the pages, the client expects a PDF to be downloaded after submitting a form.
I can generate the PDF file successfully at the backend (server-side) and return it using a stream. The output of the Web API I developed to return can be seen from following link:
At my Angular app, I have tried several ways to open the PDF in the browser or downloading it as a file. In every case, I get something similar to as shown by the screenshot below
First way I tried:
loadReport(){
this.spinner.show();
//////// /////////////// /////////////////////
this.api.loadReport(this.filterVM)
.subscribe(res => {
console.log(res);
this.spinner.hide();
////// //////////////////////////
const blob = new Blob([res], { type: 'application/pdf' });
const url= window.URL.createObjectURL(blob);
window.open(url);
////////// /////////////////////
}, err => {
console.log(err);
this.spinner.hide();
});
///// ///////////// //////////////////////////
}
Second way I tried:
loadReport(){
this.spinner.show();
//////// /////////////// /////////////////////
this.api.loadReport(this.filterVM)
.subscribe(res => {
console.log(res);
this.spinner.hide();
////// //////////////////////////
this.saveByteArray("Sample Report.pdf", res);
////////// /////////////////////
}, err => {
console.log(err);
this.spinner.hide();
});
///// ///////////// //////////////////////////
}
saveByteArray(reportName, byte) {
var blob = new Blob([byte], {type: "application/pdf"});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
var fileName = reportName;
link.download = fileName;
link.click();
};
Output of second way is shown in the below screenshot:
When I try to download the file, I have seen that it is significantly less in size than the size of the HTTP response (9 bytes vs ~16 KB). My Web API HTTP response is sending the following headers:
Content-Type: application/pdf
Content-Length: 16187
Content-Disposition: attachment; filename=Report.pdf; filename*=UTF-8''Report.pdf
I have experimented with code from the following blogs/sites, but no success yet.
Download File from Bytes in JavaScript
Typescript blob filename without link
https://blog.liplex.de/download-file-through-typescript/
