wake-up-neo.com

Konvertieren Sie HTML in PDF in Winkel 6

Ich habe eine Komponente (Angular 6), die aus mehreren Komponenten zusammengesetzt ist. Dies erzeugt einen langen HTML-Code (ich verwende Bootstrap 4). Jetzt möchte ich diesen HTML-Code in PDF konvertieren. Ich habe weit und breit gesucht und viele Lösungen gefunden, die mit jsPDF funktionieren. Die Anforderung besteht darin, ein gestochen scharfes Layout zu erstellen, wie es im HTML-Format erscheint (damit Benutzer auswählen, kopieren usw.) können. Die Lösungen, die ich gefunden habe, versuchen entweder, Textzeilen manuell hinzuzufügen, was in meinem Szenario nicht möglich ist. oder sie konvertieren (rasterisieren?) das HTML in das Bildformat. Außerdem möchte ich die Formatierung, die Schriftarten und das Styling meines HTML-Codes beibehalten.

Bisher habe ich versucht: das und das

7
Vivekanand P V

Die bestmögliche Lösung, die ich bisher finden konnte. 

Sie müssten die folgenden Pakete von npm aus installieren

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}
2
Anirudh

Versuchen Sie, einen Backend-Dienst wie Thymeleaf oder itextpdf mit Spring Boot zu verwenden. 

0
Dasun Senadeera

Installieren Sie zunächst Folgendes: 1) npm install jspdf 2) npm install html2canvas

Später importieren und verwenden Sie den folgenden Code

 public captureScreen() {
      const data = document.getElementById('invoice');
      html2canvas(data).then(canvas => {
      const imgWidth = 208;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      const heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png');
      const pdf = new jspdf('p', 'mm', 'a4'); 
      const position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      pdf.save('invoice.pdf'); 
      });
      }
0
Vaishnavi

Die beste Lösung, die mein Team und ich für unser eigenes Angular-HTML-Problem mit PDF entwickelt hatten, bestand darin, den Roh-HTML-Code an unsere Java-API zu senden und dann wkhtmltopdf ( https://github.com/) zu verwenden. wkhtmltopdf/wkhtmltopdf ) mit dem Java-Wrapper ( https://github.com/jhonnymertz/Java-wkhtmltopdf-wrapper ). Da wir einige Gotchas überwinden mussten (z. B. dafür sorgen, dass auf dem Server die korrekt installierten Schriftarten installiert sind; alles ist ordnungsgemäß kodiert; Seitenumbrüche werden ermittelt und funktionieren lassen), konnten wir unsere Seite exakt reproduzieren und unseren Angular-HTML-Code als universelle Vorlage verwenden Änderungen basierend auf verschiedenen Szenarien). Es ist kein einfacher Weg, aber es ist ein Weg, der in einer Produktionsumgebung auf Unternehmensebene großartige Ergebnisse hervorbringt, sobald man sich damit auskennt.

Es sollte beachtet werden, dass wir auch jspdf (und andere Bibliotheken) ausprobiert haben und zu ähnlichen Schlussfolgerungen wie Sie kamen: Sie haben einfach nicht das getan, was wir brauchen. Hoffentlich hilft das.

0
MapLion

Verweisen Sie dies, können Sie einige Ideen bekommen pdf-eckig

npm-eckig

0
chethu