如何从Excel中下载excel中的数据
我正在build立一个angular度的应用程序，我需要在Excel文件中导出表格数据。 我有一个乘车成功的组件，其中我有一个表显示通过angular度服务提取的数据。 现在我需要从浏览器下载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; } ); 游览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中实现一个button，点击它将在excel文件中下载完整的表格数据。
注意： – 我有angular度服务（ getRideSuccess（） ）中的所有数据。 我想从我的angular度对象下载数据，这是使用服务（ 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": "" }
您可能需要使用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函数。 附加信息在这里 。
我能够使用PrimeNG DataTableModule示例提供的DataTableModule来完成此操作 。
至于Angular2Csv的问题，我发现它在安装模块的时候会抛出UNMET PEER DEPENDENCYangular4.3.3 。 不过，我正在使用Angular 4.0.0进行开发。 看来Angular2Csv的最新版本需要4.3.3因此出错。