{"id":351,"date":"2018-08-09T20:10:52","date_gmt":"2018-08-09T18:10:52","guid":{"rendered":"https:\/\/ekiwi.de\/?p=351"},"modified":"2022-07-30T14:59:10","modified_gmt":"2022-07-30T12:59:10","slug":"html-nach-in-pdf-konvertieren","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/351\/html-nach-in-pdf-konvertieren\/","title":{"rendered":"HTML nach in PDF konvertieren"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/351\/html-nach-in-pdf-konvertieren\/#Legen_wir_los\" >Legen wir los<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/351\/html-nach-in-pdf-konvertieren\/#Download_und_Beispiel\" >Download und Beispiel<\/a><\/li><\/ul><\/nav><\/div>\n<p>Heute schauen wir uns mal an, wie wir eine Webseite bzw. HTML nach PDF konvertieren k\u00f6nnen. Mit Java-Script im Browser, ohne dass wir serverseitig irgendeine Software oder Script laufen lassen m\u00fcssen.<\/p>\n<p><!--more--><\/p>\n<p>Anwendungsgebiete gibt es jede Menge, dies kann eine Rechnung sein, welche als HTML-Dokument online erstellt wird und der Benutzer soll sich diese abspeichern k\u00f6nne. Oder ein HTML-Formular welches sich der Benutzer nicht nur drucken, sondern auch ausgef\u00fcllt als <a href=\"https:\/\/da-software.net\/2018\/08\/da-formmaker-formulare-als-pdf-abspeichern\/\">PDF abspeichern<\/a> kann.<\/p>\n<p>Die Umsetzung soll im Client erfolgen, mit Java-Script. Mittlerweile gibt es f\u00fcr alles eine Java-Script Bibliothek, so auch f\u00fcr unser Unterfangen: <a href=\"https:\/\/github.com\/eKoopmans\/html2pdf\" target=\"_blank\" rel=\"noopener\">html2pdf<\/a>.<\/p>\n<p>Diese erlaubt es uns HTML nach <a href=\"https:\/\/ekiwi-blog.de\/8954\/pdf-nach-excel-konvertieren-pdftoexcel-com\/\">PDF zu konvertieren<\/a>. Die Bibliothek ben\u00f6tigt zwei weitere Bibliotheken: <a href=\"https:\/\/github.com\/MrRio\/jsPDF\" target=\"_blank\" rel=\"noopener\">jsPDF<\/a> und <a href=\"https:\/\/github.com\/niklasvh\/html2canvas\" target=\"_blank\" rel=\"noopener\">html2canvas<\/a>.<\/p>\n<p>Alles zusammengefasst gibt es am Ende dieses Artikels zum Download.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Legen_wir_los\"><\/span>Legen wir los<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In unserem Beispiel wollen wir ein <a href=\"https:\/\/da-software.de\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener\">HTML-Formular vom DA-FormMaker<\/a> mit einer PDF-Funktion ausr\u00fcsten. Der Anwender kann so das Formular samt Inhalt als PDF abspeichern.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-353\" src=\"\/wp-content\/uploads\/2018\/08\/html2pdf_2.jpg\" alt=\"\" width=\"700\" height=\"449\" srcset=\"\/wp-content\/uploads\/2018\/08\/html2pdf_2.jpg 700w, \/wp-content\/uploads\/2018\/08\/html2pdf_2-300x192.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Zuerst m\u00fcssen wir die Java-Script Bibliotheken in unsere HTML-Datei einbinden:<\/p>\n<pre>&lt;script src=\"js\/jspdf.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/html2canvas.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/html2pdf.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Dies f\u00fcgen wir im Head-Bereich ein. Im Beispiel liegen die Dateien im Unterordner <code>js<\/code>.<\/p>\n<p>Jetzt gilt es den Inhalt festzulegen, welcher im <a title=\"PDF-Dokumente in separaten Fenstern ohne Tabs \u00f6ffnen\" href=\"https:\/\/ekiwi.de\/index.php\/2664\/acrobat-reader-keine-tabs\/\">PDF erscheinen<\/a> soll. Dies muss nicht das gesamte HTML-Dokument sein, sondern wir k\u00f6nnen einen Bereich festlegen. Somit k\u00f6nnen wir z.B. Navigationsbereiche, Werbung und andere Dinge bewusst auslassen. Dazu f\u00fcgen wir dem umschlie\u00dfenden <code>div<\/code> Element eine <code>id<\/code> hinzu:<\/p>\n<pre>&lt;div class=\"w3-card-12 w3-white mainContainer\" id=\"element-to-print\"&gt;<\/pre>\n<p>Die <code>id<\/code> &#8222;element-to-print&#8220; werden wir gleich beim PDF-Druck angeben. Der Name ist frei w\u00e4hlbar, so dass wir verschiedene Druckbereiche definieren k\u00f6nnen. Kurz gesagt, alles was sich in dem Element befindet, wird ins <a href=\"https:\/\/ekiwi-blog.de\/6533\/vba-e-mail-pdf-anhang-drucken\/\" target=\"_blank\" rel=\"noopener\">PDF gedruckt<\/a>.<\/p>\n<p>Nun legen wir am Ende unserer HTML-Datei noch eine Funktion an, welche uns den Druck ausf\u00fchren l\u00e4sst:<\/p>\n<pre>&lt;script&gt;\r\nfunction printPDF() {\r\n  var element = document.getElementById(\"element-to-print\");\r\n  var opt = {\r\n   margin:       1,\r\n   filename:     'myfile.pdf',\r\n   image:        { type: 'jpeg', quality: 0.98 },\r\n   html2canvas:  { scale: 2 },\r\n   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }\r\n  };\r\n  html2pdf(element);\r\n}\r\n&lt;\/script&gt;<\/pre>\n<p>In der ersten Zeile holen wir uns die Referenz auf das Element, welches wir zuvor definiert haben. Anschlie\u00dfend legen wir die Optionen f\u00fcr das PDF fest, welche Optionen es hier gibt, kann man alles auf der Webseite der Komponente nachlesen. Hier k\u00f6nnen Einstellungen zum Papierformat, der Bildqualit\u00e4t, Dateiname etc. festgelegt werden.<\/p>\n<p>Nun f\u00fcgen wir noch einen Drucken Button hinzu:<\/p>\n<pre>&lt;button type=\"button\" onclick=\"printPDF();\"&gt;PDF&lt;\/button&gt;<\/pre>\n<p>Dieser ruft einfach nur noch die Funktion auf. Das Ergebnis:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-352\" src=\"\/wp-content\/uploads\/2018\/08\/html2pdf_1.png\" alt=\"\" width=\"488\" height=\"359\" srcset=\"\/wp-content\/uploads\/2018\/08\/html2pdf_1.png 488w, \/wp-content\/uploads\/2018\/08\/html2pdf_1-300x221.png 300w, \/wp-content\/uploads\/2018\/08\/html2pdf_1-90x65.png 90w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-353\" src=\"\/wp-content\/uploads\/2018\/08\/html2pdf_2.jpg\" alt=\"\" width=\"700\" height=\"449\" srcset=\"\/wp-content\/uploads\/2018\/08\/html2pdf_2.jpg 700w, \/wp-content\/uploads\/2018\/08\/html2pdf_2-300x192.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Klickt der Benutzer auf den Link, erscheint ein Download-Dialog und der Anwender kann das PDF abspeichern. In unserem Beispiel sieht das PDF so aus:<\/p>\n<p>Das wars! Mit der Bibliothek k\u00f6nnen Sie recht schnell Druck- bzw. Konvertierfunktionen von HTML nach PDF umsetzen bzw. dem Benutzer anbieten. Technisch gesehen wird der Inhalt des Browsers in ein Canvas-Element bzw. Bild konvertiert, welches dann mit jsPDF in ein PDF-Dokument eingef\u00fcgt wird. Der Nachteil ist, dass das PDF eine Art Screenshot der Webseite ist. D.h. Text ist am Ende kein <a title=\"PDF mit VBA (Visual Basic for Application) einlesen\" href=\"https:\/\/ekiwi-blog.de\/24941\/vba-pdf-auslesen\/\" target=\"_blank\" rel=\"noopener\">kopierbarer Text im fertigen PDF<\/a>. Ansonsten aber eine coole L\u00f6sung.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_und_Beispiel\"><\/span>Download und Beispiel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ekiwi.de\/wp-custom\/html2pdf\/\" target=\"_blank\" rel=\"noopener\">Beispiel Formular<\/a> | <a href=\"https:\/\/ekiwi.de\/wp-custom\/html2pdf\/html2pdf.zip\" target=\"_blank\" rel=\"noopener\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Heute schauen wir uns mal an, wie wir eine Webseite bzw. HTML nach PDF konvertieren k\u00f6nnen. Mit Java-Script im Browser,<\/p>\n","protected":false},"author":1,"featured_media":354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[4,44,79],"class_list":["post-351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-html","tag-javascript","tag-pdf"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/354"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}