使用plunker的angular1示例将HTML导出为angular2中的PDF

Question

I found a simple Export to pdf on Plunker, here is the link: https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview 我在Plunker上找到了一个简单的Export to pdf，这是链接： 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 我正在尝试使用相同的但在angular2中，因为我在angular2中，我在调用用于导出到PDF的函数时感到困惑，下面是我的代码在html中的export-data.component.html和js中的代码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. 我想根据上面共享的链接理解，我应该在exportActionPDF函数内部编写什么以便导出。 Please guide 请指导

Below is the screenshot of my HTML page: 以下是我的HTML页面的屏幕截图：

Answer 1

You should call jquery plugin tableExport . 您应该调用jquery插件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. 获取对table html元素的引用，并将其传递给exportActionPDF方法。 You can also use @ViewChild instead. 您也可以改用@ViewChild 。

Plunker Example 柱塞示例

使用plunker的angular1示例将HTML导出为angular2中的PDF

问题描述

1 个解决方案

解决方案1
0 2017-05-24 08:19:18

使用plunker的angular1示例将HTML导出为angular2中的PDF

问题描述

1 个解决方案

解决方案1 0 2017-05-24 08:19:18

解决方案1
0 2017-05-24 08:19:18