HTMLテンプレートをPDF形式で印刷する - 角度2

Question

jsPDFを使用してHTMLテンプレートをPDFとして印刷しようとしましたが、エラーが発生します。私はどうすればいいのですか？

のは、私は、このテンプレートを持っているとしましょう：

<div style="text-align:center;" class="sub-header col-lg-12 col-md-12 col-sm-12"> 
    <span class="welcome-message col-lg-12 col-md-12 col-sm-12">Hola mundo</span> 
</div> 

Answer 1

終わりに、私が使用していることは、この二つのリンクです：

第1リンク これは、必要なライブラリのインストール方法を確認するために使用されます。 Link

NPMタイプ/ jspdf

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ] 

は、第二リンク として使用--save

角度-cli.json @インストールjspdf NPM

--saveインストール必要なコードを開発するためのモデル（申し訳ありませんが、この回答はスペイン語です）

Link

コンポーネントTS

pruebaDivAPdf() { 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
    var source = $('#imprimir')[0]; 

    var specialElementHandlers = { 
     '#bypassme': function (element, renderer) { 
     return true 
     } 
    }; 
    var margins = { 
     top: 60, 
     bottom: 40, 
     left: 20, 
     width: 522 
    }; 

    pdf.fromHTML(
     source, 
     margins.left, // x coord 
     margins.top, { // y coord 
     'width': margins.width, 
     'elementHandlers': specialElementHandlers 
     }, 

     function (dispose) { 
     pdf.save('Prueba.pdf'); 
     }, margins 
    ); 
    } 

コンポーネントHTML

<a (click)="pruebaDivAPdf()" class="button">Pasar a PDF</a> 

Answer 2

私がjsPDF使用しているが、印刷されたHTMLはので、私はてmanualyテーブルを作成することを決定した、非常に醜いでした。

doc.setFontSize(22) 
lineNumber = lineNumber - 6 // total number of mm in the table 
doc.text(80, 20, 'Dayly tasks') // Title 
doc.setFontSize(12) 
doc.line(18, 30, 18, lineNumber) //first vertical line 
doc.line(192, 30, 192, lineNumber) //last vertical line 
doc.line(18, lineNumber, 192, lineNumber)// last horizontal line 
doc.line(18, 30, 192, 30) // first horizontal line 
//drax inside the table 
doc.line(18, 40, 192, 40) // colon name 
doc.line(42, 30, 42, lineNumber) //col day 
doc.line(172, 30, 172, lineNumber) // col activity 
doc.line(152, 30, 152, lineNumber) // col duration 
doc.setFontType("bold"); 
doc.text(20, 35, 'Date'); 
doc.text(70, 35, 'Activity Comment'); 
doc.text(154, 35, 'Duration'); 
doc.text(174, 35, 'Overtime') 
doc.setFontType("normal"); 
doc.text(180, 280, pageNumber + '') 

lineNumberが最初に計算される：ここ

は、フレームの一例です。

お待ちください

Answer 3

jsPDFを使用することもできます。

ここにはjsPDFを使用したexampleがあります。 jsPDFを実装した後

、あなたはまた、html2Canvas をインストールし、package.jsonでそれを追加する必要があります。

"dependencies": { 
"html2canvas": "0.5.0-beta4", 
"@types/html2canvas": "0.5.32" 
......... 
} 

が実行npm install