it-swarm.com.de

Angular2 - Generiere pdf aus HTML mit jspdf

Für ein Projekt, an dem ich arbeite, muss ich in der Lage sein, eine PDF der Seite zu erstellen, auf der sich der Benutzer gerade befindet. Ich verwende jspdf. Da ich eine HTML habe, muss ich eine PDF mit generieren, ich brauche die addHTML()-Funktion. Es gibt viele Themen zu diesem Thema

Sie müssen entweder html2canvas oder rasterizehtml verwenden.

Ich habe mich für html2canvas entschieden. So sieht mein Code im Moment aus:

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');
        });
      }
    });
  }
}

Wenn diese Funktion aufgerufen wird, erhalte ich einen Konsolenfehler:

Ausnahme: Fehler in der ./AppComponent-Klasse AppComponent - Inline-Vorlage: 3: 4 verursacht durch: Sie benötigen entweder https://github.com/niklasvh/html2canvas oder https://github.com/cburgmer/ rasterizeHTML.js

Warum genau ist das? Ich gebe eine canvas als Parameter und es sagt immer noch, dass ich html2canvas verwenden muss.

6
FlorisdG

Was ich gefunden habe, fügte hinzu:

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

in die Datei index.html (es könnte sich vermutlich anderswo befinden).

Ich habe dann benutzt:

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');
});

Was nicht mehr html2canvas im Code verwendet.
Sie können dann den folgenden Import entfernen:

import * as html2canvas from 'html2canvas';
15
Greg

Falls jemand es vorziehen sollte, keine cdn-Skripte zu verwenden und einen (winkeligen) Weg verwenden möchte, hat dies in Angular 6 für mich funktioniert:

Wenn Sie diesen Weg verwenden, erhalten Sie bessere Unterstützung und Autovervollständigung im Editor. Sie vermeiden, abhängig von CDN-Skripts (wenn Sie sie vermeiden möchten, wie ich).

Basierend auf der exzellenten Antwort hier & da es mir schwer fiel, diese Antwort zu finden, teile ich das wieder, was darin gesagt wurde und half mir, jsPDF in Angular 6 zu verwenden (alles Gute geht an den ursprünglichen Autor dieses Artikels) Antworten)

Sie sollten diese cmds ausführen:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Fügen Sie Folgendes in angle-cli.json hinzu:

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

html:

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

komponente 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');
    }
}
7
Ahmed Elkoussy

Jeder, der noch versucht, ein Html-Div in ein PDF-Format zu konvertieren, kann html2pdf verwenden. Mit ein paar Zeilen können Sie alles problemlos erledigen.

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

Versuchen Sie es so: 

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