How to download excel/Zip files in Angular 4 -

i using angular 4 frond end , lumen 5.4 end.

my requirement export data excel , zip file.

using import { saveas } 'file-saver/filesaver'; package file download.

angular 4 code:

downloadexcel() {  const type = 'application/vnd.ms-excel'; const headers = { headers: new headers({ 'accept': type }) }; const filename = 'file.xls';  this.http.get('http://10.2.2.109/download/exportexcel', headers)   .topromise()   .then(response => this.savetofilesystem(response, type, filename));  return false;   }    private savetofilesystem(response, __type, filename) {     const contentdispositionheader: string = response.headers.get('content-disposition');  if (contentdispositionheader !== null) {   const parts: string[] = contentdispositionheader.split(';');   //const filename = parts[1].split('=')[1];   const blob = new blob([response._body], { type: __type });   saveas(blob, filename); } else {   alert('cant download.....');   // handling download condition if content disposition empty   const blob = new blob([response._body], { type: __type });   saveas(blob, filename); }   } 

lumen code

public function exportexcel(request $request) {         $file = storage_path();         $file_name = 'book1.xls';         $headers = [             'content-type' => 'application/vnd.ms-excel',             'content-disposition' => 'attachment;filename="' . $file_name,             'x-filename' => $file_name,             'content-transfer-encoding' => 'binary',             'content-length' => filesize($file . '/' . $file_name),             'cache-control' => 'max-age=0',             'cache-control' => 'max-age=1',             'expires' => 'mon, 26 jul 1997 05:00:00 gmt',             'last-modified' => gmdate('d, d m y h:i:s') . ' gmt',             'cache-control' => 'cache, must-revalidate',             'pragma' => 'public',             'set-cookie' => 'filedownload=true; path=/',             'access-control-expose-headers' => 'content-length,cache-control,content-language,content-type,expires,last-modified,pragma'         ];          return response()->download($file . '/' . $file_name, $file_name, $headers);     } 

issues

1. const contentdispositionheader: string = response.headers.get('content-disposition'); seems empty.
2. we cant open downloaded file, shows corrupted message.
3. it working text file download

please me resolve issue. or specify other working code//package angular

try this:

downloadexcel() {    const type = 'application/vnd.ms-excel';   const filename = 'file.xls';   const options = new requestoptions({             responsetype: responsecontenttype.blob,             headers: new headers({ 'accept': type })         });    this.http.get('http://10.2.2.109/download/exportexcel', options)            .catch(errorresponse => observable.throw(errorresponse.json()))            .map((response) => {                   if (response instanceof response) {                     return response.blob();                  }                  return response;             })            .subscribe(data => saveas(data, filename),                       error => console.log(error)); // implement error handling here  } 

the key points responsetype: responsecontenttype.blob on requestoptions , response.blob() when getting response.

in general, it's not recommended access _body property of response this: response._body, instead should call relevant method body content based on type (like response.blob(), response.json(), etc)