エクセル4からデータをダウンロードする方法

Question

エクセルファイルでテーブルデータをエクスポートする必要があるアングルアプリを構築しています。 私は角のサービスを通してフェッチされたデータを表示しているテーブルを持っている乗り継ぎ成功コンポーネントを持っています。 このテーブルのデータをブラウザからExcelファイルにダウンロードする必要があります。

ridesuccessコンポーネント： -

export class RideSuccessComponent implements OnInit { 



p = 1; 
    myForm: FormGroup; 
    rideSuccess: RideSuccess[]; 
    rsuccess: RideSuccess = ''; 
    constructor(private adminService: AdminService) {} 



ngOnInit() { 

    this.rsuccess = ''; 

    this.adminService.getRideSuccess() 
    .subscribe(
     (rideSuccess: RideSuccess[]) => { 
      this.rideSuccess = rideSuccess; 
     } 
    ); 

ridesuccessのHTML： -

<table class="responstable" id="responsetable"> 

    <tr> 
    <th data-th="Driver details"><span>Driver name</span></th> 
    <th>Rider Name</th> 
    <th>Pool ID</th> 
    <th>Amount</th> 
    <th>Source</th> 
    <th>Destination</th> 
    <th>Sum ID</th> 
    <th></th> 
    </tr> 

    <tr *ngFor="let ridesuccess of rideSuccess| paginate: { itemsPerPage: 5, currentPage: p }; let i = index" > 
    <td>{{ridesuccess.driverName}}</td> 
    <td>{{ridesuccess.riderName}}</td> 
    <td>{{ridesuccess.poolId}}</td> 
    <td>{{ridesuccess.amount}}</td> 
    <td>{{ridesuccess.source}}</td> 
    <td>{{ridesuccess.destination}}</td> 
    <td>{{ridesuccess.sumId}}</td> 
    <td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" (click)="setmodal(ridesuccess)">Gratify</button></td> 
    </tr> 
</table> 

<pagination-controls (pageChange)="p = $event" class="my-pagination" style="float: right"></pagination-controls> 

今私は、クリックされた上でExcelファイルにフル・テーブル・データをダウンロードするHTMLでボタンを、実装したいです。

注：私はすべてのデータを角サービス（getRideSuccess（））に持っています。私は、サービスを使用してデータが取り込まれている角オブジェクトからデータをダウンロードしたいと考えています（getRideSuccess（））。

Package.json： -

{ 
    "name": "pagination", 
    "version": "1.0.0", 
    "private": true, 
    "scripts": { 
    "start": "node ./bin/www", 
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch", 
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'" 
    }, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/platform-server": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@angular/upgrade": "^4.0.0", 
    "angular2-bootstrap-confirm": "^1.0.4", 
    "angular2-csv": "^0.2.5", 
    "bcryptjs": "^2.4.3", 
    "body-parser": "~1.15.2", 
    "chart.js": "^2.5.0", 
    "cookie-parser": "~1.4.3", 
    "core-js": "^2.4.1", 
    "debug": "~2.2.0", 
    "express": "~4.14.0", 
    "hbs": "~3.1.0", 
    "jsonwebtoken": "^7.4.0", 
    "mongoose": "^4.9.6", 
    "mongoose-sequence-plugin": "^1.0.5", 
    "mongoose-unique-validator": "^1.0.5", 
    "morgan": "~1.6.1", 
    "ng2-charts": "^1.5.0", 
    "ngx-pagination": "^3.0.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "^5.2.0", 
    "serve-favicon": "~2.3.0", 
    "shortid": "^2.2.8", 
    "zone.js": "^0.8.5" 
    }, 
    "devDependencies": { 
    "@types/core-js": "0.9.36", 
    "@types/node": "^6.0.45", 
    "angular-router-loader": "^0.5.0", 
    "angular2-template-loader": "^0.5.0", 
    "awesome-typescript-loader": "^3.1.2", 
    "del-cli": "^0.2.0", 
    "html-loader": "^0.4.4", 
    "raw-loader": "^0.5.1", 
    "ts-loader": "^2.0.3", 
    "typescript": "^2.1.4", 
    "webpack": "^2.2.1", 
    "webpack-merge": "^4.1.0" 
    }, 
    "main": "app.js", 
    "author": "", 
    "license": "ISC", 
    "description": "" 
} 

Answer 1

あなたがこれを行うためにangular2-csvライブラリを使用する必要があるかもしれません。
npm install --save angular2-csv

import { Angular2Csv } from 'angular2-csv/Angular2-csv'; 


    export class RideSuccessComponent implements OnInit { 
     ... 
     rideSuccess: RideSuccess[]; 
     ... 
     exportData() { 

      new Angular2Csv(this.rideSuccess, 'My Report'); 

     } 
     ... 
    } 

あなたはいつでもそれからちょうどexportData関数を呼び出します。追加情報here。

Answer 2

PrimeNG DataTableModule Exampleが提供するDataTableModuleを使用してこれを実行できました。

Angular2Csvの問題については、モジュールをインストールするときに角度4.3.3を投げることがわかりました。しかし、私は開発用に角4.0.0を使用しています。 の最新バージョンのようです。Angular2Csvには4.3.3が必要です。