Previously, I had set up a PHP post form that would download an excel file upon clicking the button. The form data was also posted to the URL successfully using plain HTML and submit form.
This is the function in PHP that gets triggered when the form is posted:
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');
}
Although it worked fine previously with the Request Headers set as shown here:
https://i.stack.imgur.com/HKwc1.png
The response now seems to be empty as indicated here:
https://i.stack.imgur.com/8kT5E.png
We are now transitioning our frontend to the Angular framework. Despite trying this method:
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' }
});
}
When attempting to download in Angular, I noticed that the Content-Type request header was changed to
Content-Type: multipart/form-data; boundary angularhttps://i.stack.imgur.com/8KYbX.png I am seeking guidance on how to enable downloading in Angular within this scenario.