將HTML轉換成使用angular2 jspdf PDF而不使用jQuery

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並試圖動態生成HTML表格轉換爲使用JSPDF不使用jQuery PDF格式。請在下面檢查下面的評論：

我使用的是angular2，需要將html轉換爲pdf。

來源

2017-03-21 Munish Sharma

Plunker鏈接：https://plnkr.co/edit/hAd0lPjyWs0pJOL3sAOp?p=preview –

請與代碼的最重要的部分更新的問題。 –

simon您可以在下面的Plunker鏈接中查看最新的代碼： https://plnkr.co/edit/hAd0lPjyWs0pJOL3sAOp?p=preview –

嘗試在代碼中添加此：

import * as jsPDF from 'jspdf';

來源

2017-09-16 10:05:16

這不會提供問題的答案。一旦你有足夠的[聲譽]（https://stackoverflow.com/help/whats-reputation），你將可以[對任何帖子發表評論]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提問者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [來自評論]（/ review/low-quality-posts/17351228） – matino

將HTML轉換成使用angular2 jspdf PDF而不使用jQuery

回答

相關問題