Question

我正在构建一个角度应用程序，我需要在excel文件中导出表数据。我有一个乘坐成功组件，其中有一个表显示通过角度服务获取的数据。现在我需要从浏览器下载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>

现在我想在HTML中实现一个按钮，单击该按钮将在excel文件中下载完整的表格数据。

注意： - 我的角度服务中包含所有数据（ 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问题，我发现在安装模块时它会抛出 UNMET PEER DEPENDENCY angular 4.3.3 。但是，我正在使用 Angular 4.0.0 进行开发。似乎 Angular2Csv 的最新版本需要4.3.3因此错误。

如何从Angular 4下载excel中的数据

2 个答案: