エクセルにデータをエクスポートする正しい方法ですか？

Question

私は現在、アプリケーションからExcelまたはCSVのいずれかのデータをエクスポートしようとしています。これを達成する最良の方法は何ですか？バックエンドからエクスポートするか、データクライアント側で角2内のライブラリを使用したらエクスポートする必要がありますか？ My Web API 2コントローラは現在、リストを作成してJSONとしてフロントエンドに送信します。

これはすべて動作しますが、私はリストをエクスポートするだけで苦労しています。ここで

は、必要であれば、私は任意の角度2のコードを提供することができますどのように私は角2

に送られる私のデータを生成していますされて、私は

[HttpGet] 
[Route("/api/preview/{item}")] 
public IActionResult Preview(string item) 
{  
    if (item!= null) 
    { 
     var preview = _context.dbPreview.FromSql("Exec sampleStoredProcedure {0}, 1", item).ToList(); 

     return Ok(preview); 
    } 
} 

をやっているかのサンプルですそれは単なる通常のサービスです。輸出を行うためにAngular 2とうまく機能するライブラリがあるかどうかは分かりませんでした。私はjavascriptではなくalaSQLのいくつかを見てきましたが、角2で動作するようには見えません。

アイデア？

Answer 1

私はソースコードをPrimeNG DataTableから探しましたが、データのCSVをエクスポートするのにexportCSVコードを使用することができます。

「トリック」とは、data:text/csv;charset=utf-8で始まる文字列を生成し、これをユーザーがダウンロードできるようにすることです。

次のコードのようなものがうまくいくはずです（あなたのデータに合うように少し修正する必要があるかもしれません）。

ほとんどのコードは、ダウンロード方法を除いてPrimeNGからコピーされています。このメソッドはSO answerからコピーされます。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    csvSeparator = ';'; 

    value = [ 
     { name: 'A3', year: 2013, brand: 'Audi' }, 
     { name: 'Z3', year: 2015, brand: 'BMW' } 
    ]; 

    columns = [ 
     { field: 'name', header: 'Name' }, 
     { field: 'year', header: 'Production data' }, 
     { field: 'brand', header: 'Brand' }, 
    ]; 

    constructor() { 

     console.log(this.value); 
     this.exportCSV('cars.csv'); // just for show casing --> later triggered by a click on a button 
    } 

    download(text, filename) { 
     let element = document.createElement('a'); 
     element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text)); 
     element.setAttribute('download', filename); 

     element.style.display = 'none'; 
     document.body.appendChild(element); 

     element.click(); 

     document.body.removeChild(element); 
    } 

    exportCSV(filename) { 
     let data = this.value, csv = ''; 
     // csv = "data:text/csv;charset=utf-8,"; 

     //headers 
     for (let i = 0; i < this.columns.length; i++) { 
      if (this.columns[i].field) { 
       csv += this.columns[i].field; 

       if (i < (this.columns.length - 1)) { 
        csv += this.csvSeparator; 
       } 
      } 
     } 

     //body   
     this.value.forEach((record, j) => { 
      csv += '\n'; 
      for (let i = 0; i < this.columns.length; i++) { 
       if (this.columns[i].field) { 
        console.log(record[this.columns[i].field]); 
        // resolveFieldData seems to check if field is nested e.g. data.something --> probably not needed 
        csv += record[this.columns[i].field]; //this.resolveFieldData(record, this.columns[i].field); 

        if (i < (this.columns.length - 1)) { 
         csv += this.csvSeparator; 
        } 
       } 
      } 
     }); 
     // console.log(csv); 
     // window.open(encodeURI(csv)); // doesn't display a filename! 
     this.download(csv, filename); 
    } 

    // resolveFieldData(data: any, field: string): any { 
    //  if(data && field) { 
    //   if(field.indexOf('.') == -1) { 
    //    return data[field]; 
    //   } 
    //   else { 
    //    let fields: string[] = field.split('.'); 
    //    let value = data; 
    //    for(var i = 0, len = fields.length; i < len; ++i) { 
    //     value = value[fields[i]]; 
    //    } 
    //    return value; 
    //   } 
    //  } 
    //  else { 
    //   return null; 
    //  } 
    // } 


} 

Answer 2

AWolfs答えは右のトラックに私を得たが、私は、Internet Explorerでの作業それを得るためにいくつかの調整を行いました。

この関数は、my配列を自分のcsvファイルの文字列に変換します。 （私は列ヘッダーだった新しいオブジェクトを作成しなければならなかった）。私はその後、私のサービスによって生成されたデータを関数に渡し、私のために解析を行います。より複雑なデータについては、いくつかの追加ロジックを行う必要があると信じていますが、基本的なテキストがあるので、すべてがうまくいきました。

ほとんどAWolfsの答えと同じであったが、私は、それは追加のブラウザで動作するように取得するにはDownloadFile関数にいくつかの変更をしなければならなかった

exportCSV(filename, CsvData) { 
    let data = CsvData, csv = ''; 

    console.log(data); 
    //headers 
    for (let i = 0; i < this.columns.length; i++) { 
     if (this.columns[i].field) { 
      csv += this.columns[i].field; 

      if (i < (this.columns.length - 1)) { 
       csv += this.csvSeparator; 
      } 
     } 
    } 

    //body   
    CsvData.forEach((record, j) => { 
     csv += '\n'; 
     for (let i = 0; i < this.columns.length; i++) { 
      if (this.columns[i].field) { 
       console.log(record[this.columns[i].field]); 
       csv += record[this.columns[i].field]; 
       if (i < (this.columns.length - 1)) { 
        csv += this.csvSeparator; 
       } 
      } 
     } 
    }); 
    this.DownloadFile(csv, filename); 
} 

。この関数は、.CSVファイルとファイル名を構成する巨大な文字列を受け入れます。

DownloadFile(text, filename) { 
    console.log(text); 
    var blob = new Blob([text], { type: 'text/csv;charset=utf-8;' }); 
    if (navigator.msSaveBlob) { // IE 10+ 
     navigator.msSaveBlob(blob, filename); 
    } 
    else //create a link and click it 
    { 
     var link = document.createElement("a"); 
     if (link.download !== undefined) // feature detection 
     { 
      // Browsers that support HTML5 download attribute 
      var url = URL.createObjectURL(blob); 
      link.setAttribute("href", url); 
      link.setAttribute("download", filename); 
      link.style.visibility = 'hidden'; 
      document.body.appendChild(link); 
      link.click(); 
      document.body.removeChild(link); 
     } 
    } 
} 

このコードのニーズはクリーンアップが、私は同じことで苦しんでいた誰のための答えで私の質問を更新したかったです。これは少なくともあなたを始めさせるはずです。これはChromeとIEの両方で機能します。

ありがとうございました。