Angular export Excelクライアント側

Question

私はAngular v4を使用しています。コンポーネント内のオブジェクトからExcelスプレッドシートを作成するにはどうすればよいでしょうか。私はボタンをクリックするだけでExcelファイルをダウンロードする必要があり、私はこのクライアント側をしなければならない。私は配列で構成されたjsonファイルを持っており、これをExcelファイルに転送する必要があります。おそらくスタイルでカスタマイズできます。出来ますか？はいの場合、どうですか？

編集： ませんJSライブラリ、それが可能でない活字体と角

Answer 1

yourdata = jsonData

ConvertToCSV(objArray) { 
      var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 
       var str = ''; 
      var row = ""; 

      for (var index in objArray[0]) { 
       //Now convert each value to string and comma-separated 
       row += index + ','; 
      } 
      row = row.slice(0, -1); 
      //append Label row with line break 
      str += row + '\r\n'; 

      for (var i = 0; i < array.length; i++) { 
       var line = ''; 
       for (var index in array[i]) { 
        if (line != '') line += ',' 

        line += array[i][index]; 
       } 
       str += line + '\r\n'; 
      } 
      return str; 
     } 

：コンポーネントで

<button (click)="download()">export to excel</button> 

：

download(){  
var csvData = this.ConvertToCSV(yourdata); 
         var a = document.createElement("a"); 
         a.setAttribute('style', 'display:none;'); 
         document.body.appendChild(a); 
         var blob = new Blob([csvData], { type: 'text/csv' }); 
         var url= window.URL.createObjectURL(blob); 
         a.href = url; 
         a.download = 'User_Results.csv';/* your file name*/ 
         a.click(); 
         return 'success'; 
} 

は、あなたがそれはあなた

Answer 2

でこれを行う必要がありますしてください。

XLSはバイナリ形式です。

プロジェクトは、Apache POI（https://en.wikipedia.org/wiki/Apache_POI）のHSSF（Horrible SpreadSheet Format）という名前のクラスです。

私の推薦では、サーバー側で作成してください。

Answer 3

あなたの要件に基づいてこの回答が気に入らない場合があります。しかし、JSライブラリがなくても、あなたはホイールを再発明しています。私は個人的にExcelのXMLフォーマットを見つけたので、下の図書館（Angularから呼び出すことができます）を使って、あなたはすでにその作業の恩恵を受けることができます。

あなたのデザインには、コンテンツのダウンロードとオープン/編集の2つの部分がありますが、AngularはAngularとして扱われていません。

1. Search for how to download files within Angular
2. ダウンロードが起こっている、とファイルが、今私はあなたがそれがバックグラウンドでのJSライブラリをせずに終わらないだろうと思いsomething like this

Answer 4

を使用して、それを開く「ローカル」になったら。 あなたが必要とするのは、あなたのAngularプロジェクトでタイスクリプトを使用するための入力です。

Excelファイルを作成するには、exceljsのようなものを使用できます。あなたのプロジェクトでそれを使用するには、hereと入力してください。このライブラリが適合するかどうかはわかりません。以前は使用していませんでした。

ダウンロードするには、FileSaver.js（私はすでに使用しています）を使用する必要があります。

npm install file-saver --save 

...とタイピング：

npm install @types/file-saver --save-dev 

FileSaver.jsを使用するためには、あなたのコンポーネントに以下のインポートを置く：

import * as FileSaver from 'file-saver'; 

ことをダウンロード使用をトリガするには：

FileSaver.saveAs(fileData, "filename.xlsx") 

'fileData 'はBlobでなければなりません。

これは少し役立ちます。

あなたのhtmlで