在angular2中使用jspdf将HTML转换为PDF而不使用JQUERY答案

【问题标题】：Convert HTML to PDF using jspdf in angular2 without using JQUERY在angular2中使用jspdf将HTML转换为PDF而不使用JQUERY
【发布时间】：2017-03-21 12:37:53
【问题描述】：

import {Component, ElementRef, ViewChild} from "angular2/core";
declare let jsPDF; 

@Component({
  selector: 'my-app',
    template: `
     <button (click)="pdfHtml()">Download to PDF</button>
    <table #test>
        <thead >
            <th class="my-class">Name</th>
        </thead>
        <tbody>
            <tr *ngFor="#hero of heroes" >
            <td><svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg></td>
                <td>{{hero.name}}</td>
            </tr>
        </tbody>
    </table>
   
   `,
    styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
})

export class App {
  @ViewChild('test') el: ElementRef;
isClassVisible: true;
 heroes = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'},
     {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];
    constructor() {
    }

    public download() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.save('Test1.pdf');
    }
    
    public pdfHtml() {
      alert(this.el.nativeElement.innerHTML);
        let pdf = new jsPDF();
        let options = {
            pagesplit: true
        };
        pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
            pdf.save("test1.pdf");
        });
    }

}

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

我是 jspdf 的新手，并尝试使用 JSPDF 而不使用 Jquery 将动态生成的 HTML 表转换为 pdf。请在 cmets 中检查以下 plunker：

我正在使用 angular2，需要将 html 转换为 pdf。

【问题讨论】：

Plunker 链接：plnkr.co/edit/hAd0lPjyWs0pJOL3sAOp?p=preview
请用代码中最重要的部分更新问题。
simon 您可以在下面的 Plunker 链接中查看最新代码：plnkr.co/edit/hAd0lPjyWs0pJOL3sAOp?p=preview

标签： angular typescript jspdf html-to-pdf jspdf-autotable

【解决方案1】：

尝试将其添加到您的代码中：

 import * as jsPDF from 'jspdf';

【讨论】：