Filesaver.js: Issue in downloading excel and Zip files

Created on 11 Sep 2017 · 6Comments · Source: eligrey/FileSaver.js

I am using angular 4 as front end and Lumen 5.4 as back end.

My requirement is to export some data as excel and zip file.

Using import { saveAs } from 'file-saver/FileSaver'; package for 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 is 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

const contentDispositionHeader: string = response.headers.get('Content-Disposition'); seems always empty.
We cant open downloaded file, shows corrupted message.
It working perfectly for text file download

Please help me to resolve this issue. OR specify any other working code/package for angular.

Source

binishprabhakar

Most helpful comment

I have created a wiki for downloading remote files: https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file.

jimmywarting on 19 Feb 2018

👍2 🎉1

All 6 comments

I had encountered a similar problem but our environment is different, using axios to request static or dynamic zip file from node/express server. See if the following suggestions help:

setting the responseType of the GET request to 'arraybuffer' makes the zip file readable (but the zip file is still empty even though there's data)
on the server side, when I remove the code that specifies the content-disposition, the zip file becomes readable and with correct content.