エクセル/ Zipファイルを角4でダウンロードするには

Question

角4を後端、内腔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. テキストファイルのダウンロード

のために働くことは、この問題を解決するために私を助けてください。または他の作業コードを指定する//

Answer 1

試してみてくださいこの：

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とresponse.blob()にresponseType: ResponseContentType.Blobですレスポンスを返す

一般に

、このような応答の_bodyプロパティにアクセスすることを推奨していない：response._bodyが、その代わりに、あなたは（などresponse.blob()、response.json()、のような）そのタイプに基づいてボディコンテンツを取得するために

を、関連するメソッドを呼び出す必要があります

Answer 2

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

$ npm install json2csv --save 

：

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

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