web-dev-qa-db-fra.com

Télécharger des données dans Excel à partir de Angular 4

Je construis une application angulaire dans laquelle j'ai besoin d'exporter les données de la table dans un fichier Excel. J'ai un composant de succès de tour dans lequel j'ai une table qui affiche des données récupérées par un service angulaire. Maintenant, je dois télécharger les données de ce tableau dans un fichier Excel à partir de mon navigateur.

composante 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>

Maintenant, je veux implémenter un bouton en HTML, qui cliquera sur télécharger les données complètes du tableau dans un fichier Excel.

NOTE: - J'ai toutes les données dans mon service angulaire ( getRideSuccess () ). Je souhaite télécharger des données à partir de mon objet angulaire qui est renseigné à l'aide du service ( 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": ""
}
excelangularservice
3
Himanshu

Pour ce faire, vous devrez peut-être utiliser la bibliothèque 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');

        }
        ...
    }

Ensuite, appelez la fonction exportData à tout moment. Informations supplémentaires ici .

5
Dani Grosu

J'ai pu faire cela en utilisant DataTableModule fourni par PrimeNG DataTableModule Example .

En ce qui concerne le problème Angular2Csv, j’ai trouvé qu’il jetait UNMET PEER DEPENDENCY angular 4.3.3 lors de l’installation du module. Cependant, j'utilise Angular 4.0.0 pour le développement. Il semble que la dernière version de Angular2Csv nécessite 4.3.3 d’où l’erreur.

1
Himanshu