Export HTML to PDF in angular2 using angular1 example of plunker
Question
I found a simple Export to pdf on Plunker, here is the link: https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview
I am trying to use the same but in angular2, as i am in angular2 i am confused in calling the function which is used in exporting to PDF, below is my code In html its of export-data.component.html and in js its of export-data.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-export-data', templateUrl: './export-data.component.html', styleUrls: ['./export-data.component.css'] }) export class ExportDataComponent implements OnInit { constructor() { } reportData = [ { "EmployeeID": "1234567", "LastName": "Lastname", "FirstName": "First name", "Salary": 1000 }, { "EmployeeID": "11111111", "LastName": "Lastname 1", "FirstName": "First name 1", "Salary": 2000 } ]; exportActionPDF(){ } ngOnInit() { } }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <!-- <link rel="stylesheet" href="../../exportlibrary/style.css" /> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script> <script src="../../exportlibrary/tableExport.js"></script> <script src="../../exportlibrary/app/jquery.base64.js"></script> <script src="../../exportlibrary/app/sprintf.js"></script> <script src="../../exportlibrary/app/jspdf.js"></script> <script src="../../exportlibrary/app/base64.js"></script> </head> <body ng-controller="MainCtrl"> <p>Export HTML Table to Excel, Pdf, CSV and Doc</p> <table class="export-table" style="width: 100%; margin-top: 20px"> <thead> <tr> <th>Employee ID</th> <th>Last Name</th> <th>First Name</th> <th>Salary</th> </tr> </thead> <tbody> <!-- <tr ng-repeat="item in reportData"> --> <tr *ngFor="let item of reportData"> <td>{{item.EmployeeID}}</td> <td>{{item.LastName}}</td> <td>{{item.FirstName}}</td> <td>{{item.Salary}}</td> </tr> </tbody> </table> <hr> <a href="#" data-ng-click="exportAction('csv')"> Export CSV</a><br/><br/> <a href="#" data-ng-click="exportAction('excel')"> Export Excel</a><br/><br/> <a href="#" data-ng-click="exportAction('doc')"> Export Doc</a><br/><br/> <a href="#" (click)="exportActionPDF"> Export Pdf</a><br/><br/> </body> </html>
I want to understand as per the link shared above, what should i write inside the exportActionPDF function so that it exports. Please guide
Below is the screenshot of my HTML page:
1 answers
solution1
0 2017-05-24 08:19:18
You should call jquery plugin tableExport . Here is an example:
declare let $: any;
@Component({
selector: 'my-app',
template: `
<table #table class="export-table" style="width: 100%; margin-top: 20px">
<thead>
<tr>
<th>Employee ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of reportData">
<td>{{item.EmployeeID}}</td>
<td>{{item.LastName}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.Salary}}</td>
</tr>
</tbody>
</table>
<a href="#" (click)="exportActionPDF(table)"> Export Pdf</a><br/><br/>
`,
})
export class App {
reportData = [
{
"EmployeeID": "1234567",
"LastName": "Lastname",
"FirstName": "First name",
"Salary": 1000
},
{
"EmployeeID": "11111111",
"LastName": "Lastname 1",
"FirstName": "First name 1",
"Salary": 2000
}
];
exportActionPDF(table){
$(table).tableExport({ type: 'pdf', escape: false });
}
}
Notice i use template reference variable
<table #table
to get reference to table html element and pass it to exportActionPDF method. You can also use @ViewChild instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.