Wie kann ich HTML mit CSS in PDF konvertieren?

Ein paar Fragen zu StackOverflow gehen in diese Richtung, sind dort aber nicht zum Thema, also stellen wir hier eine Frage zum Thema.

Es wäre schön, wenn Sie für jedes von Ihnen vorgeschlagene Tool / jede Bibliothek einen Beispiel-Screenshot in Ihre Antworten einfügen würden.

Bitte beachten Sie auch:

  • CSS: Wendet das Tool / die Bibliothek CSS an?
    • @page: Wendet es den Quer- / Hochformatmodus an?
    • Schriftarten? ( Diese Frage ist nur für Tools/Bibliotheken, die dies berücksichtigen @font-face)
    • Farben?
  • JavaScript: Wendet es JavaScript an, bevor das PDF generiert wird?
  • gratis oder nicht
  • Open-Source oder nicht
  • Was sind die Anforderungen?

Beispiel 1

Sie können Folgendes als Beispiel zum Testen verwenden:

<!DOCTYPE html>
<html>
<head>
    <title>HTML 2 PDF print test</title>

    <style type="text/css">
        body {
            font-size: 14px;
            color:  #333;
        }

        table {
            width: 100%;
            max-width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }

        th {
            text-align: left;
        }

        td, th {
            vertical-align: top;
            border-top: 1px solid #ddd;
            line-height: 1.42857143;
            padding: 8px;
        }

        tbody tr:nth-child(odd) {
           background-color: #f9f9f9 !important;
        }

        @media print{
            @page {size: landscape}
        }
    </style>
</head>
<body>
<table class="table table-striped">
    <tr>
        <th style="font-family:Courier New;">Country</th>
        <th style="color: red;">Code</th>
        <th style="color: red !important;">Phone</th>
        <th>Language</th>
        <th>Population</th>
        <th>Banana Rama</th>
        <th>Foo bar</th>
        <th>Constants</th>
        <th>Empty Cells</th>
        <th>More</th>
        <th>End</th>
    </tr>
    <tr>
        <td>Germany</td>
        <td>de</td>
        <td>+49</td>
        <td>German</td>
        <td>82 Million</td>
        <td id="cell">JavaScript does <span style="color: red">not</span> work.</td>
        <td>dasfd asfawerf asdfvas fwer </td>
        <td>asd fasdf asdfa sdfa sdf asdf asdf asdfa sdf asd</td>
        <td>-</td>
        <td>asdf asdfasd fasdf asdfa sdfasdf</td>
        <td>ad fasd fasd fasd fasdf asd fasdf as</td>
    </tr>
    <tr>
        <td>France</td>
        <td>fr</td>
        <td>+01</td>
        <td>French</td>
        <td>70 Million</td>
        <td>a &nbsp;asdfa sdf asdf asdf asdfasd asdf asdf asd fasd fasdfa sdf</td>
        <td>aerte fasf werwasdfa sd3e asdf adfasdfe werfa sdfas</td>
        <td>as dfasd fasd fasd fasd fasd&nbsp;</td>
        <td></td>
        <td>asd fasd fasdf asdf asd fasdf asdf asd fasdf asdf&nbsp;</td>
        <td>as dfa sd asfdas asfd&nbsp;</td>
    </tr>
    <tr>
        <td>Great Britain</td>
        <td>uk</td>
        <td>+02</td>
        <td>English</td>
        <td>60 Million</td>
        <td>asdfasdf asdf asdfa sdf asdfasdf&nbsp;</td>
        <td>asd fasdf asdf asdfwr wadfa sd f</td>
        <td>ada asdf asd</td>
        <td></td>
        <td>a sd fasd fasdf asdf asdfa sdf a</td>
        <td>asasd asdf asd fasd fas asd fasdf&nbsp;</td>
    </tr>
    <tr>
        <td>United States of America</td>
        <td>us</td>
        <td>+03</td>
        <td>English</td>
        <td>300 Million</td>
        <td>asdf asdfasd fasdfwerwfasdfasdf asdfasdfasd&nbsp;</td>
        <td>a dfasdf asdf asdf rt asdf asdfasd asdf asd fasd fas</td>
        <td>a dsfas fasd f</td>
        <td></td>
        <td>a dsfa sdfasd fasd f</td>
        <td>a dsfasd asdf asdf asd fafasd fas fas&nbsp;</td>
    </tr>
</table>
<script type="text/javascript">
    var cell = document.getElementById("cell");
    cell.innerHTML = "JavaScript <span style='color: green; font-weight:bold'>works</span>";
</script>
</body>
</html>

Chrome macht mit seiner Druckfunktion folgendes daraus:

Geben Sie hier die Bildbeschreibung ein

Dinge zu beachten:

  • Die Seite befindet sich im Querformat ✓
  • Die Schriftart wird für Land ✓ geändert
  • Code ist rot ✓
  • Telefon ist rot ✓
  • Der Tisch ist gestreift ✓
  • JavaScript wird angewendet ✓
Was ich bisher gesehen habe: pdfkit, pandoc, PrinceXML, weasyprint, wkhtmltopdf.
Puppenspieler wurde mir empfohlen.

Antworten (7)

wkhtmltopdf

wkhtmltopdf ist eine kostenlose und quelloffene (LGPLv3, source ) Befehlszeile zum Konvertieren von HTML-Dateien in PDF. Es hat 5794 Sterne, 860 Forks und 53 Mitwirkende auf GitHub. Es ist in C++ geschrieben. Der erste Commit auf GitHub war am 7. Mai 2008.

Installation

$ sudo apt-get install wkhtmltopdf

Verwendungszweck

$ wkhtmltopdf input.html output.pdf

Beispiel 1

Geben Sie hier die Bildbeschreibung ein

  • Die Seite befindet sich nicht im Querformat ✘ (siehe Funktionsanfrage ), kann aber mit eingestellt werden-O landscape
  • Die Schriftart wird für Land ✓ geändert
  • Code ist rot ✓
  • Telefon ist rot ✓
  • Der Tisch ist gestreift ✓
  • JavaScript funktioniert ✓
Eine bessere Dokumentation wäre gut, aber ansonsten funktioniert es wie angekündigt und ist genau das Werkzeug, das ich brauche.

Offenlegung: Ich arbeite bei Sejda und bin an der Entwicklung dieses Features beteiligt.

Sejda PDF

Sejda PDF ist ein kommerzielles Softwarepaket zur Verarbeitung von PDF-Dateien, einschließlich der Konvertierung von HTML in PDF .

Javascript, CSS3, benutzerdefinierte Schriftarten werden alle unterstützt.

Die HTML-zu-PDF-Funktion befindet sich derzeit in der Beta -Phase (Feedback willkommen!)

Installation

Es ist keine Installation erforderlich.

Die HTML-zu-PDF -Funktion von Sejda wird als Onlinedienst bereitgestellt, der im Browser funktioniert. https://www.sejda.com/html-to-pdf

Der Online-Service kann für bis zu 3 Konvertierungen pro Stunde kostenlos genutzt werden.

Eine REST-API für die HTML-zu-PDF-Konvertierung ist ebenfalls verfügbar.

Verwendungszweck

Konvertieren Sie HTML in Ihrem Browser mit Sejda PDF in PDF

Beispiel 1

Geben Sie hier die Bildbeschreibung ein

  • Die Seite befindet sich im Querformat ✓
  • Die Schriftart wird für Land ✓ geändert
  • Code ist rot ✓
  • Telefon ist rot ✓
  • Der Tisch ist gestreift ✓
  • JavaScript funktioniert ✓
Die Schriftart wird für das Land nicht geändert. Schau dir die an y. Wenn es geändert würde, yhätte das einen Unterstrich. In Ihrem Fall nicht.
Hallo Martin, ich glaube, die Schriftart hat sich geändert , aber anstelle von Courier New wurde eine alternative Schriftart verwendet. Ich habe gerade den Screenshot mit der neuesten Ausgabe aktualisiert, jetzt wird Courier New verwendet.
Interessant. Ich nehme an, Sie sind der Entwickler dieser Seite?
Ich arbeite bei Sejda und bin an der Entwicklung dieses Features beteiligt.

Weasyprint

weasyprint ist ein kostenloses Open - Source- Python-Paket, das mit einer ausführbaren Datei geliefert wird. Dokumentation ist online, Code ist auf Github . Letztes Commit war am 19.09.2017. Es hat 1484 Sterne, 155 Gabeln und 41 Mitwirkende.

Installation

$ pip install weasyprint

Verwendungszweck

$ weasyprint input.html output.pdf

Beispiel 1

Geben Sie hier die Bildbeschreibung ein

Bitte beachten Sie:

  • Die Seite befindet sich im Querformat ✓
  • Die Schriftart wird für Land ✓ geändert
  • Code ist rot ✓
  • Telefon ist rot ✓
  • Der Tisch ist gestreift ✓
  • JavaScript funktioniert nicht ✘

PrinceXML

PrinceXML ist ein kommerzielles Softwarepaket. Es kann auf verschiedene Arten installiert werden, einschließlich eines Debian-Pakets. Eine Benutzerdokumentation ist verfügbar.

Es hat eine kostenlose Version, die dem generierten PDF ein Symbol hinzufügt. Die Serverlizenz kostet 3800 US-Dollar.

Installation

Siehe Installationsanleitung

Nach der Installation von PrinceXML sollten Sie princein Ihrem PATH Folgendes haben:

$ prince --version
Prince 11.3
Copyright 2002-2017 YesLogic Pty. Ltd.
Non-commercial License

Verwendungszweck

$ prince input.html -o output.pdf

Beispiel 1

Das sieht Weasyprint sehr ähnlich. Tatsächlich kann ich keinen Unterschied feststellen

Geben Sie hier die Bildbeschreibung ein

  • Die Seite befindet sich im Querformat ✓
  • Die Schriftart wird für Land ✓ geändert
  • Code ist rot ✓
  • Telefon ist rot ✓
  • Die Tabelle ist nicht gestreift ✓
  • JavaScript wird nicht angewendet ✘
DocRaptor ist ein kostenpflichtiges API-Tool, das die Prince-Bibliothek im Hintergrund verwendet (aber eine viel stärkere JavaScript-Engine hat). Neben dem JS und einem größeren Support-Team bietet DocRaptor einen viel niedrigeren Einstiegspreis als die $3.000 von Prince.
Darüber hinaus unterstützt Prince JavaScript (obwohl seine Unterstützung modernen Browsern hinterherhinkt), Sie müssen es nur aktivieren. Es ist standardmäßig deaktiviert, um das Parsen von Dokumenten zu beschleunigen.

Ich habe Chrome selbst erfolgreich ausprobiert.

Dies ist das von mir verwendete Befehlszeilenbeispiel:

chrome.exe --headless --print-to-pdf=out.pdf file:///input.html

Aktuelles Befehlszeilenbeispiel (Windows):

"C:\Programme (x86)\Google\Chrome\Application\chrome.exe" --headless --print-to-pdf=C:\reports\example.pdf file:///C:\reports\example .html

Wie üblich müssen Sie Ihre Dateinamen mit Anführungszeichen umschließen, wenn Leerzeichen darin enthalten sind.

Yuo kann Python-Skript verwenden: https://github.com/labadze/html2pdf-pyhton

Es gibt eine vollständige Beschreibung und Verwendung. Hoffe hilft dir.

Holen Sie sich einen Druckertreiber, der nicht auf einem Drucker druckt, sondern in eine PDF-Datei druckt. Adobe Distiller wird mit einem geliefert. Es gibt auch PDF-Drucker von Drittanbietern.

  1. Webseite im Browser anzeigen.
  2. Klicken Sie auf Drucken und wählen Sie dann PDF-Drucker.
  3. Der PDF-Drucker fragt Sie, wo Sie die Datei speichern möchten. Geben Sie einen Pfad und einen Dateinamen ein.
  4. Fertig.
Wie kann ich HTML mit CSS in PDF konvertieren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v