How to Download Excel file in Angular using File Saver - php

Question

I had created post form in PHP where on clicking the button it was downloading an excel file and I had some form data also posted to the URL and file used to download successfully with plain HTML and submit form
In PHP this is function triggered when the form is posted to the file
public function downloadExcel($fileName = '', $addTimeStamp = true) {
$fileName = (!$fileName) ? 'excel_download' : preg_replace('/\s+/', '_', $fileName);
if ($addTimeStamp) {
$fileName .= date('_d_m_Y_H_i_s');
}
$fileName .= '.xlsx';
$this->setActiveSheetIndex(0);
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="' . $fileName . '"');
header('Cache-Control: max-age=0');
header('Cache-Control: max-age=1');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: cache, must-revalidate');
header('Pragma: public');
$objWriter = PHPExcel_IOFactory::createWriter($this, 'Excel2007');
$objWriter->save('php://output');
}
When it was working, I have below thing set in the Request Headers
And it was nothing showing in the response
But now we are trying to migrate frontend to the Angular framework from which we are able to download the file, I have tried his way
downloadTheExport() {
this.downloadfile().subscribe((blob: any) => {
const blobdownload = new Blob([blob], { type: "application/vnd.ms-excel;charset=utf-8" });
saveAs(blobdownload, 'testdata.xls');
});
}
downloadfile(){
const formDataForExport: FormData = new FormData();
formDataForExport.append('export', 'ALL');
return this.http.post('http://localhost:8080/service/exportExcel.php', formDataForExport, {
headers: { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' }
});
}
And When I am trying to download this in Angular I have observed that when the Call is made in Angular it seems Request header for Content-Type is changed to Content-Type: multipart/form-data; boundary angular and also when I see in the response tab it showing some data as below.
Can you please help me how to achieve downloading in Angular in this situation

Answer 1

It is correct for the Content-Type in your Request header since you indeed post a formDataForExport via php backend.
But the way to handle the response seems wrong. I propose a solution below may help:
Assuming if you are referencing this fileSaver:
https://github.com/Hipparch/file-saver-typescript/blob/master/file-saver.ts
Recommend to include above script and use it since to handle different browser behaviour in saving files it is in complexity and not good for re-implement them.
downloadTheExport() {
this.downloadfile().subscribe((resp: any) => {
const fileSaver: any = new FileSaver();
fileSaver.responseData = resp.body;
fileSaver.strFileName = 'testdata.xls';
fileSaver.strMimeType = 'application/vnd.ms-excel;charset=utf-8';
fileSaver.initSaveFile();
});
}
downloadfile() {
const formDataForExport: FormData = new FormData();
formDataForExport.append('export', 'ALL');
return this.http.post('http://localhost:8080/service/exportExcel.php', formDataForExport, {
headers: { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' },
responseType: 'blob',
observe: 'response'
});
}

Answer 2

If anyone wants only to download a file from assets, they can use this code:
But you need to mention the location in angular.json
"architect": {
"build": {
"options": {
"assets": [
"src/assets/files"
]
}
}
}