Einige Zusammenfassungen von Fällen zur Konvertierung von HTML in PDF (mehrere Bilder empfohlen)

Einige Zusammenfassungen von Fällen zur Konvertierung von HTML in PDF (mehrere Bilder empfohlen)

Aus beruflichen Gründen habe ich vor Kurzem einige Zeit damit verbracht, die Funktion zur Konvertierung von HTML in PDF zu erforschen. Die Schlüsseltechnologie bei der Konvertierung von HTML in PDF ist der Umgang mit den komplexen CSS-Stilen in Webseiten. Durch das Sammeln von Informationen im Internet wurde festgestellt, dass die aktuellen Lösungen zur Konvertierung von HTML in PDF hauptsächlich in drei Kategorien unterteilt sind:

Client-Modus : Das Front- und Back-End rufen das Client-Programm auf und verwenden die Funktionen des Client-Programms, um die PDF-Dateikonvertierung abzuschließen. Die Testtools sind: wkhtmltopdf und PhantomJS. Klassenmodus zum Parsen von Java-JAR-Paketen: Java-Code analysiert den CSS-Stil und übersetzt die HTML-Datei in eine PDF-Datei. Die Testklassen sind: IText, Flying Sauser, PD4ML. js-Frontend-Analysemodus: js-Frontend analysiert HTML-Dateien in PDF-Dateien. Die Testfälle dieses Mal sind: html2canvas.

Dieses Mal haben wir die online vorgestellten Lösungen einzeln in Kombination mit den Anforderungen tatsächlicher Projekte getestet und hinsichtlich Leistung und Funktionalität die folgende Analyse durchgeführt.

1. Einführung zur Testseite

Durch die Betrachtung der Einführung verschiedener Konvertierungsfälle im Internet werden bei der Konvertierung von PDF-Dateien einfache HTML-Stile und allgemeine Tabellenstile unterstützt. Unter Berücksichtigung der tatsächlichen Geschäftsanforderungen wurde bei diesem Test jedoch insbesondere der CSS-Stil von Bootstrap (v 3.3.6) verwendet und auf der Seite wurden auch die neuen Funktionen von CSS3 angewendet. Schreiben Sie basierend auf dieser neuen Funktion eine statische HTML-Seite. Der Anzeigeeffekt der HTML-Seite im Browser ist wie folgt:

2.wkhtmltopdf-Test

wkhtmltopdf ist ein Tool, das mit der Webkit-Web-Rendering-Engine entwickelt wurde, um HTML in PDF zu konvertieren. Es kann in mehrere Skriptsprachen integriert werden, um Dokumente zu konvertieren. Offizielle Website-Adresse http://wkhtmltopdf.org/

Technische Merkmale: Wkhtmltopdf kann die im Browser angezeigte Webseite direkt in ein PDF umwandeln. Es handelt sich um eine Software, die HTML-Seiten in PDF umwandelt (muss auf dem Server installiert werden). Bei der Verwendung können Sie den cmd-Befehl über Java-Code aufrufen, um die Funktion zum Konvertieren der Webseite in PDF abzuschließen.

Funktionstest: Geben Sie den Testbefehl direkt in cmd ein, um den Verarbeitungsfortschritt anzuzeigen.

Der erste Parameter: der Pfad, in dem sich wkhtmltopdf.exe befindet

Der zweite Parameter: die HTML-Seite, die in PDF konvertiert werden muss

Der dritte Parameter: PDF-Dateipfad und Dateiname

Der Seitenexport hat folgende Auswirkungen:

Testbeschreibung:

Durch Tests haben wir festgestellt, dass wkhtmltopdf den CSS-Stil von Bootstap insgesamt gut unterstützt. Für neue CSS3-Funktionen wie kreisförmige Bildstile gibt es nur unzureichende Unterstützung. Einige Seitenstile sind ungültig. Bei der Diagrammanzeige meldet das Eachart-Diagrammexportprogramm einen Fehler und wird nicht unterstützt. Allerdings verfügt echart über eine Schnittstelle zum Umwandeln von Diagrammen in Bilder, die durch Abrufen der Bildadresse ins PDF-Format exportiert werden können.

3. PhantomJS-Tests

PhantomJS ist ein Headless-Browser, der auf dem WebKit-Kernel basiert. Das heißt, er hat keine Benutzeroberfläche (UI). Es handelt sich also um einen Browser, aber menschliche Vorgänge wie Klicken und Umblättern erfordern eine Programmierimplementierung. Es bietet eine JavaScript-API-Schnittstelle, d. h. durch das Schreiben von JS-Programmen können Sie direkt mit dem WebKit-Kernel interagieren. Darüber hinaus können Sie die Java-Sprache usw. kombinieren und JS und andere zugehörige Vorgänge über Java aufrufen, wodurch die Einschränkung aufgehoben wird, dass nur C/C++ zum Entwickeln hochwertiger Collector auf Basis von WebKit verwendet werden kann. Darüber hinaus bietet es Installationspakete für verschiedene Betriebssysteme wie Windows, Linux und Mac, sodass die sekundäre Entwicklung von Sammlungsprojekten oder automatische Projekttests auf verschiedenen Plattformen durchgeführt werden können. Offizielle Website-Adresse: http://phantomjs.org/

PhantomJS kann zur Webseitenanalyse verwendet werden und verfügt über viele Funktionen. Dieses Mal verwenden wir nur die Screenshot-Funktion der Webseite. Der Test in cmd sieht wie folgt aus:

Der Effekt des Testseitenexports ist wie folgt:

Testbeschreibung:

Durch Tests wurde festgestellt, dass PhantomJS Bootstap-Stile gut unterstützt. Für neue CSS3-Funktionen wie kreisförmige Bildstile gibt es nur unzureichende Unterstützung. Einige Seitenstile sind ungültig. Für die eChart-Diagrammanzeige kann es auch direkt exportiert werden. Die Wirkung ist wie folgt:

3. IText und Flying Sauser

IText implementiert html2pdf, das zwar schnell ist, aber nur eine schlechte Fehlerkorrektur bietet. Es unterstützt Chinesisch (erfordert HTML-Unicode-Kodierung), unterstützt aber nur eine chinesische Schriftart. Es ist Open Source. Flying Sauser implementiert html2pdf, verfügt über unzureichende Fehlerkorrekturfunktionen, unterstützt mehrere chinesische Schriftarten (einige Stile werden nicht erkannt) und ist Open Source.

Technische Funktionen: Analysieren und verarbeiten Sie HTML-CSS-Stile basierend auf Java-Programmierung. Derzeit werden nur einfachere Seiten und Stile unterstützt. Die Kompatibilität mit CSS3-Stilen und komplexen zugehörigen CSS-Stilen ist äußerst schlecht. Bei langen Seiteninhalten ist die Verarbeitungszeit lang. Referenzadresse: https://code.google.com/archive/p/flying-saucer/

Testergebnis: Die Testseite dieses Experiments kann nicht angezeigt werden. Die normale Testseite hat folgende Auswirkungen:

Testbeschreibung:

Durch Tests wurde festgestellt, dass die beiden Open Source-Projekte IText und Flying Sauser grundsätzlich nicht mit CSS3 kompatibel sind. Nach Rücksprache mit den Informationen stellte sich heraus, dass diese Technologie relativ alt ist und dieses Open Source-Projekt nicht aktualisiert oder gewartet wird. Für den Export einfacher Tabellen und statistischer Daten umfassen neuere Technologien den Export von Bootstrap-Tabellen und EasyUI-DataGrid-Tabellen. Von dieser im Internet vorgestellten Lösung wird abgeraten.

4.PD4ML-Test

PD4ML ist eine reine Java-Klassenbibliothek, die HTML und CSS als Seitenlayout- und Inhaltsdefinitionsformate zum Generieren von PDF-Dokumenten verwendet. Sie kann die Arbeit zum Generieren von PDFs für Endbenutzer vereinfachen. Referenz-Website: http://www.pd4ml.com

Die Vorteile dieser Software sind:

Es unterstützt eine relativ vollständige Palette an HTML-Tags und CSS-Attributen mit relativ geringer Konvertierungsverzerrung und durch die Verwendung von HTML+CSS kann eine präzise Layoutsteuerung erreicht werden. Es weist eine bessere Toleranz gegenüber Fehlern in Datei-Tags und der CSS-Syntax von Webseiten auf. Es unterstützt die Bildkonvertierung und -ausgabe ohne zusätzliche Steuerung.

Die Nachteile dieser Software sind:

Kein Open Source. Nach dem Herunterladen und Testen der neuesten Demoversion wurde festgestellt, dass sie die Konvertierung ins Chinesische nicht unterstützt. Sie müssen die kommerzielle Version erwerben. (Das ist ein kniffliger Teil. Das Problem mit dem verstümmelten Code hat den Test nicht bestanden. Später fand ich heraus, dass es von vornherein nicht unterstützt wurde.) Einige alte Versionen können das Problem des verstümmelten Codes nach dem Knacken lösen, aber die unterstützten CSS-Stile sind nicht so vollständig wie bei den neuen Versionen.

Testergebnisse:

Testbeschreibung:

Die neue Version enthält verstümmelte chinesische Schriftzeichen, unterstützt aber einige CSS-Stile. Nach der Entschlüsselung der alten Version ist die Kompatibilität des Schnittstellenstils schlecht und die Unterstützung für Bootsrtap gering. Es kann grundsätzlich problemlos Daten ausgeben und Bilder anzeigen. Da es sich um eine kostenpflichtige Software handelt und die Leistung nicht optimal ist, wird vom Verwenden des Vorlagenexports oder anderer Tools zum Exportieren normaler Seiten abgeraten.

5.html2canvas-Test

Html2canvas ist eine sehr gute JavaScript-Bibliothek, die einige neue Funktionen von HTML5 und CSS3 verwendet, um die Funktion zum Erstellen von Screenshots von Webseiten auf der Clientseite zu realisieren. html2canvas ruft die DOM- und Elementstilinformationen der Seite ab und rendert sie in ein Canvas-Bild, wodurch die Funktion zum Erstellen eines Screenshots der Seite realisiert wird. Es ist kein Rendering vom Server erforderlich, das gesamte Bild wird im Client-Browser erstellt. Wenn der Browser Canvas nicht unterstützt, wird stattdessen die Flashcanvas- oder ExplorerCanvas-Technologie verwendet. Die folgenden Browser unterstützen dieses Skript gut: Firefox 3.5+, Google Chrome, Opera neue Version, IE9 und höher. Da jeder Browser Seiten anders darstellt, sind auch die resultierenden Bilder unterschiedlich. Obwohl es sich noch in der Entwicklungsphase befindet, lohnt es sich, darauf gespannt zu sein. Dieses Plugin ist vom jQuery-Plugin abhängig und es wird empfohlen, die neueste Version zu verwenden.

Unterstützt keine domänenübergreifenden Bilder. Kann nicht in Browser-Plug-Ins verwendet werden. Einige Browser unterstützen keine SVG-Bilder. Unterstützt kein Flash. Unterstützt kein iFream (Sie können den ursprünglichen JS-Code ändern, um iFream zu unterstützen).

Beim Testen mit html2canvas habe ich festgestellt, dass von vielen Projektseiten, darunter auch E-Chart-Diagrammen, normal Screenshots erstellt werden können. Nur einige neue CSS3-Funktionen werden nicht unterstützt. Der Screenshot-Effekt ist besser. Beim Testen der Anwendung wurde jedoch ein schwerwiegendes Problem festgestellt. Nachdem das Seitenmodul html2canvas aufgerufen hatte, um einen Screenshot zu erstellen, stellte sich heraus, dass ein Teil des CSS der Originalseite plötzlich ungültig wurde. Nach der Verfolgung und Analyse wurde festgestellt, dass die js-Funktion von html2canvas den CSS-Stil verarbeitete, den sie nicht erkennen konnte. Insbesondere beim Ausblenden und Anzeigen von Modulen ist der Support nicht freundlich.

Der Seiten-Screenshot-Effekt ist wie folgt:

Allerdings ist das CSS der Originalseite ungültig, die Seite verhält sich abnormal, einige Stile sind ausgeblendet und die angezeigten Stile sind chaotisch.

Testbeschreibung:

Durch Tests wurde festgestellt, dass html2canvas Bootstap-Stile gut unterstützt. Für neue CSS3-Funktionen wie kreisförmige Bildstile gibt es nur unzureichende Unterstützung. Sein Hauptvorteil ist, dass es ein leichtes Frontend hat. Um den Stil der Originalseite zu ändern, können Sie zuerst das Bild exportieren und dann die Seite aktualisieren.

6. Zusammenfassung

Durch das Testen der oben genannten Fälle können wir feststellen, dass die meisten der im Internet vorgestellten, häufig verwendeten Methoden zum Konvertieren von HTML in PDF einfache HTML-Konvertierungen sind, die verwendet werden können, in der tatsächlichen Anwendung jedoch noch viele Probleme aufweisen und schwierig anzuwenden sind. Durch die Analyse der Implementierungsprinzipien dieser Methoden können folgende Schlussfolgerungen gezogen werden:

Alle Lösungen weisen Mängel bei der vollständigen Konvertierung von HTML-Seiten in PDF auf. Wenn es sich nur um einen Teil der Formularseite handelt, versuchen Sie, keine CSS3-Attribute im HTML-Stil zu verwenden und verwenden Sie für die Verarbeitung den Client-Modus und html2canvas. Der Front-End-Stil von HTML entwickelt sich rasant, die neuen Funktionen von CSS3 sind wirksam und CSS definiert neue Regeln und Syntax. Java-Konvertierungsklassen wie IText und Flying Sauser sind mit diesen Änderungen überhaupt nicht kompatibel, da es unmöglich ist, Konvertierungsfunktionen rechtzeitig zu schreiben. Außerdem handelt es sich bei diesen Open Source-Projekten um ältere Technologien, und die späteren Open Source-Teams haben aufgehört, sie zu warten und zu aktualisieren. PD4ML ist im Wesentlichen eine Java-basierte Stilkonvertierung für CSS. Es handelt sich um eine kommerzielle Software und bietet Teamunterstützung für CSS3-Kompatibilität. Es ist leistungsstärker und funktionsreicher als IText und Flying Sauser. Allerdings werden einige CSS-Stile nicht gut unterstützt. Und es ist nicht einfach, das Problem der verstümmelten chinesischen Schriftzeichen zu lösen. In Bezug auf den Client-Browser-Kernelmodus ist PhantomJS leistungsfähiger als wkhtmltopdf. Screenshots sind nur eine seiner kleinen Funktionen. Es kann auch zur Webseitenanalyse verwendet werden. Es wird empfohlen, PhantomJS zu verwenden. Der Screenshot-Modus von html2canvas ist flexibel und es ist ein leichtes Front-End-Screenshot-Tool. Derzeit sind einige Funktionen unvollständig, aber der Gesamteffekt ist gut. Um das Problem zu lösen, dass einige Screenshots die Originalseite beeinträchtigen, können Sie den Screenshot erfolgreich speichern und die Seite dann einmal aktualisieren, um den Effekt des Exportierens des Screenshots in PDF zu erzielen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM!

<<:  CSS implementiert fünf gängige 2D-Transformationen

>>:  Welche Ähnlichkeiten gibt es zwischen der Entwicklung des Webdesigns und der westlichen Architektur?

Artikel empfehlen

Designtheorie: Zehn Tipps zur Inhaltspräsentation

<br /> Der Entwurf einer persönlichen Schrei...

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

Das Temperament einer Web-Frontend-Website ist ein...

Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung

Prinzip der MySQL-Paging-Analyse und Effizienzver...

Vite+Electron zum schnellen Erstellen von VUE3-Desktopanwendungen

Inhaltsverzeichnis 1. Einleitung 2. Erstellen Sie...

Vuex implementiert einfache Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Co...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

So aktivieren Sie TLS- und CA-Authentifizierung in Docker

Inhaltsverzeichnis 1. Zertifikat generieren 2. Ak...

Lernen Sie MySQL auf einfache Weise

Vorwort Die Datenbank war schon immer meine Schwa...

So stellen Sie ein Linux-System automatisch mit PXE bereit

Inhaltsverzeichnis Hintergrund DHCP konfigurieren...

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

In diesem Artikel wird die spezifische Methode zu...