web-dev-qa-db-ja.com

Angular 4でExcel / Zipファイルをダウンロードする方法

私はangular 4をフロントエンドとして使用し、Lumen 5.4をバックエンドとして使用しています。

私の要件は、一部のデータをExcelおよびZipファイルとしてエクスポートすることです。

ファイルのダウンロードに_{ saveAs }_パッケージからのインポート_'file-saver/FileSaver';_の使用。

角度4コード：

_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);
}


}
_

ルーメンコード

_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);
    }
_

問題

  1. const contentDispositionHeader: string = response.headers.get('Content-Disposition');は常に空のようです。
  2. ダウンロードしたファイルを開くことができません。破損したメッセージが表示されます。
  3. テキストファイルのダウンロードに使用できます

この問題の解決を手伝ってください。 OR他の作業コードを指定する//角度のパッケージ

excelangularfiledownload
6
Binish Prabhakar

これを試して：

_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 your error handling here

}
_

重要なポイントは、RequestOptionsの_responseType: ResponseContentType.Blob_と、応答を取得するときのresponse.blob()です。

一般に、次のように応答の__body_プロパティにアクセスすることはお勧めしません：_response._body_代わりに、関連するメソッドを呼び出して、タイプに基づいて本文コンテンツを取得する必要があります（response.blob()、response.json()など）

10
Andrei Matracaru

入力データがJSON形式の場合、 json2csv を使用できます。関数の出力はCSVになり、Microsoft ExcelまたはGoogleスプレッドシートで開くことができます。

パッケージをインストールします。

$ npm install json2csv --save

以下をコンポーネントに追加します。

var json2csv = require('json2csv');
var fields = ['field1', 'field2', 'field3'];
var result = json2csv({ data: myData, fields: fields });
0
Nikhil Baby