web-dev-qa-db-ja.com

Angular2-jspdfを使用してHTMLからPDFを生成

私が取り組んでいるプロジェクトでは、ユーザーが現在開いているページのPDFを生成できるようにする必要があります。そのためにjspdfを使用します。 HTMLがあるPDF withを生成する必要がある、addHTML()関数が必要です。これについては多くのトピックがあります。

html2canvasまたはrasterizehtmlを使用する必要があります。

html2canvasを使用することにしました。これは私のコードが現時点でどのように見えるかです：

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

この関数が呼び出されると、コンソールエラーが表示されます。

例外：./AppComponentクラスAppComponentのエラー-インラインテンプレート：3：4原因： https://github.com/niklasvh/html2canvas または https：// githubのいずれかが必要です.com/cburgmer/rasterizeHTML.js

なぜこれが正確ですか？パラメーターとしてcanvasを指定しても、html2canvasを使用する必要があると言われています。

angularpdftypescriptjspdfhtml2canvas
9
FlorisdG

私が働いたのは追加することでした：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

index.htmlファイル（おそらく他の場所にある可能性があります）。

次に使用しました：

const elementToPrint = document.getElementById('foo'); //The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
    doc.save('web.pdf');
});

コードでhtml2canvasを使用しなくなりました。
その後、次のインポートを削除できます。

import * as html2canvas from 'html2canvas';
17
Greg

誰かがcdnスクリプトを使用しないことを好み、より（角度のある）方法を使用したい場合、これはAngular 6：

この方法を使用すると、エディターでより良いサポートとオートコンプリートが得られ、cdnスクリプトに依存することを避けるのに役立ちます（私のようにそれらを避けたい場合）

ここの優れた答え ＆に基づいて、その答えを見つけるのが難しいので、その中に記載されていることを再共有し、Angular = 6（すべてのクレジットはこの回答の元の著者に送られます）

次のコマンドを実行する必要があります。

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Angular-cli.jsonに次を追加します。

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

html：

<button (click)="download()">download </button>

コンポーネントts：

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}
8
Ahmed Elkoussy

Html divをpdfに変換しようとしている人は誰でも html2pdf を使用することを選択できます。

var element = document.getElementById('element-to-print');
html2pdf(element);
4
Sadiq Ali

このようにしてみてください：

GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');    
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 10, 10, 580, 300);
        pdf.save('web.pdf');
      }
    });
  }
2
ferralucho