Website-Suche

angular - Angular2 - PDF aus HTML mit jspdf generieren

Für ein Projekt, an dem ich arbeite, muss ich in der Lage sein, ein PDF der Seite zu erzeugen, auf der sich der Benutzer gerade befindet, wofür ich jspdf verwenden werde. Da ich ein HTML habe, das ich in ein PDF umwandeln muss, werde ich die Funktion addHTML() benötigen. Es gibt viele Themen darüber, die sagen

Sie müssen entweder html2canvas oder rasterizehtml verwenden.

Ich habe mich entschieden, html2canvas zu verwenden. 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 ./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 so? Ich gebe ein canvas als Parameter und es sagt trotzdem, dass ich html2canvas verwenden muss.

Antwort #1

Was ich herausgefunden habe, dass es funktioniert, war folgendes hinzuzufügen:

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

zur Datei index.html (sie könnte vermutlich an einem anderen Ort sein).

Ich habe dann verwendet:

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

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

import * as html2canvas from 'html2canvas';

Antwort #2

Falls jemand es vorzieht, keine CDN-Skripte zu verwenden und eine eher (Angular-)methode verwenden möchte, hat dies bei mir in Angular 6 funktioniert:

Die Verwendung dieser Methode wird Ihnen besseren Support und Autovervollständigung im Editor bieten und Ihnen helfen, die Abhängigkeit von CDN-Skripten zu vermeiden (wenn Sie sie vermeiden möchten, wie ich).

Basierend auf der ausgezeichneten Antwort hier und da es für mich schwer war, diese Antwort zu finden, teile ich erneut, was darin angegeben wurde und mir geholfen hat, jsPDF in Angular 6 zu verwenden (alle Anerkennung geht an den ursprünglichen Autor dieser Antwort)

Du solltest diese Befehle ausführen:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Fügen Sie Folgendes in angular-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');
    }
}

Verwandte Artikel