suchen

Heim >Web-Frontend >js-Tutorial >Starlight in PDF umwandeln: Erfahrungen und Erkenntnisse

Starlight in PDF umwandeln: Erfahrungen und Erkenntnisse

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-15 10:24:42714Durchsuche

Stellen Sie sich vor, Sie erhalten eine Aufgabe: Erstellen Sie in einer Woche eine neue Dokumentationswebsite. Es sollte optisch ansprechend, schnell und einfach zu navigieren sein. Sie erhalten einen Stapel *.docs-Dateien, Bilder und Screenshots mit der Anweisung, „erledigen“.

Es stehen viele hervorragende Tools zur Auswahl, wie zum Beispiel Docusaurus, Nextra, VitePress, Docus und andere. Zuvor hatte ich großartige Erfahrungen beim Erstellen einer Dokumentationswebsite mit Starlight gemacht, daher war es meine Wahl für diese Aufgabe. Allerdings habe ich eine fehlende Funktion entdeckt: die Möglichkeit, aus der Dokumentation ein PDF zu generieren. Und es war eine der Anforderungen. „Klingt nach einem netten Nebenprojekt“, dachte ich mir.

Die Aufgabe angehen

Zuerst schien es einfach: Seiten abrufen, HTML analysieren, Inhalte gruppieren und voilà!

Starlight-basierte Websites verfügen über eine Schaltfläche „Weiter“, um durch die Dokumentation zu navigieren. Da es sich bei PDF im Wesentlichen um eine Reihe von Seiten handelt, schien es logisch, diese mit der Schaltfläche „Weiter“ einzeln zu analysieren. Da die Website statische Seiten generiert, habe ich schnell ein Skript geschrieben, um den HTML-Code abzurufen, die erforderlichen Teile abzufragen und alles zusammenzufügen. Allerdings erwies sich die Erstellung einer PDF-Datei, die den Stil der Website beibehielt, als komplexer. Nach einigem Brainstorming wurde mir klar, dass Puppeteer die beste Lösung war.

Jetzt wurde der Prozess klar:

  1. Identifizieren Sie die Startseite. Dies ist die erste Seite mit der Schaltfläche „Weiter“.
  2. Navigieren Sie durch die Seiten. Extrahieren Sie die Überschrift und den Hauptinhalt von jeder Seite und erstellen Sie gleichzeitig ein Inhaltsverzeichnis.
  3. Kombinieren Sie den Inhalt. Fügen Sie Seitenumbrüche und zusätzliche Stile hinzu.
  4. Bereiten Sie den endgültigen HTML-Code vor. Schreiben Sie den neu. der Startseite mit dem resultierenden HTML.
  5. Ressourcen laden. Scrollen Sie auf der Seite nach unten, um alle Bilder zu laden.
  6. Generieren Sie das PDF.Die Methode Page.pdf() von Puppeteer bringt es auf den Punkt.
    7. Fertig!
So funktioniert Starlight-to-PDF. Nach diesem Muster können Sie ähnliche Tools für andere Dokumentations-Frameworks erstellen, denen die PDF-Exportfunktion fehlt.

Nächste Schritte

Sobald die Grundfunktionalität fertig war, war es an der Zeit, einige Extras hinzuzufügen. Nachfolgend finden Sie die interessantesten und anspruchsvollsten Funktionen.

Kopf- und Fußzeilen hinzufügen

Es ist schön, eine Seitenzahl und einige zusätzliche Informationen in der Kopf- oder Fußzeile zu haben. Die Page.pdf()-Methode von Puppeteer akzeptiert headerTemplate- und footerTemplate-Optionen. Diese Optionen akzeptieren HTML-Strings. Puppeteer fügt automatisch Werte in die Elemente ein, die bestimmte Dienstprogrammklassen haben:

  • .date: formatiertes Datum;
  • .title: Tag-Wert;</li> <li> .url: URL der Seite, auf der die Druckfunktion aufgerufen wurde;</li> <li> .pageNumber: aktuelle Seitenzahl;</li> <li> .totalPages: Gesamtzahl der Seiten im Dokument.</li> </ul> <p>Da wir den gesamten Inhalt vor dem Drucken auf einer Seite zusammenfassen, haben Titel und URL für uns keinen großen Wert: Der eingefügte Wert bleibt immer derselbe. Andere Kurse helfen jedoch sehr. Hier ist ein Beispiel für eine Fußzeilenvorlage:<br> </p> <pre class="brush:php;toolbar:false"><style> .footer-container { --color: #000; display: flex; align-items: center; justify-content: space-between; border-block-start: 1px solid var(--color); color: var(--color); font-size: 10px; font-family: Arial, Helvetica, sans-serif; margin-inline: 1.5cm 1cm; padding-block: 0.25cm 0.5cm; width: 100%; } </style> <div> <p>To use this, do not forget to set the displayHeaderFooter property to true:<br> </p> <pre class="brush:php;toolbar:false">import puppeteer from 'puppeteer'; const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://someUrl'); const footerTemplateStr = '<style>...<style><div>...</div>' // replace with the HTML string from the example above await page.pdf({ displayHeaderFooter: true, footerTemplate: footerTemplateStr }) </pre> <p>Hier sind einige Erkenntnisse, die Sie im Hinterkopf behalten sollten:</p> </pre> <ul> <li>Die Vorlage muss eine gültige HTML-Struktur sein.</li> <li>Definieren Sie die CSS-Eigenschaft „font-size“ so, dass der Standardwert von Puppeteer 0 ist.</li> <li>Verwenden Sie Inline <style> Tag, um Ihre Stile zu definieren. Website-Stile sind in den Vorlagen nicht verfügbar.</li> <li>Bilder sollten als Base64-Strings codiert werden.</li> <li>Verwenden Sie die Randoption von Puppeteer, um das gewünschte Layout zu erreichen.</li> </ul> <h3> Was ist mit CLI-Stilen? </h3> <p>Alles funktioniert gut, das resultierende PDF sieht gut aus, aber die Terminalmeldungen wirken langweilig. Die Liebe zum Detail trennt das Gute vom Großen, nicht wahr? Machen wir unsere Nachrichten bunter und leichter lesbar.</p> <p>Hier kommt die Magie der ANSI-Escape-Sequenzen zum Vorschein. Ich entschied, dass 4-Bit-Farben für den Job ausreichen würden. Nehmen wir an, Sie möchten einen weißen Text auf rotem Hintergrund haben <em>(das habe ich für mein [ERROR]:-Präfix vor Fehlermeldungen verwendet)</em>. So können Sie diesen Look erreichen:<br> </p> <pre class="brush:php;toolbar:false">console.log('\x1b[37;41m', 'White on red message'); </pre> <p>Lassen Sie es uns aufschlüsseln:</p> <ul> <li> x1b[ ist ein hexadezimaler Escape-Code (Sie können auch u001b als Unicode-Alternative verwenden);</li> <li> 37 ist eine weiße Vordergrundfarbe, wobei 3 für den Vordergrund und 7 für die weiße Farbe steht;</li> <li> 41 ist eine rote Hintergrundfarbe, wobei 4 für den Hintergrund und 1 für die rote Farbe steht.</li> </ul> <p>Alles funktioniert, aber jetzt werden alle unsere console.log()-Ausgaben auf diese Weise gestaltet. Um den Stil auf die Standardeinstellungen zurückzusetzen, fügen Sie am Ende einfach die Reset-Sequenz x1b[0m hinzu:<br> </p> <pre class="brush:php;toolbar:false">console.log('\x1b[37;41m', 'White on red message', '\x1b[0m'); </pre> <p>Viel besser. Was wäre, wenn wir fetten Cyan-Text auf einem grauen Hintergrund <em>(helles Schwarz in den Namen von 4-Bit-Farben)</em> wünschen? Es ist ganz einfach:<br> </p> <pre class="brush:php;toolbar:false">console.log('\x1b[1;36;100m', 'Cyan on gray message in bold', '\x1b[0m'); </pre> <p>Hier ist, was jeder Teil bewirkt:</p> <ul> <li> 1 nach dem Escape-Code wendet den Fettdruck an;</li> <li> 36 setzt die Textfarbe auf Cyan;</li> <li> 100 ändert den Hintergrund in eine helle schwarze Farbe, wobei 10 <em>hell</em> bedeutet und 0 ein Code für <em>schwarz</em> ist.</li> </ul> <p>Mit diesem Wissen können Sie Ihr CLI-Tool optisch ansprechend gestalten. Beispielsweise habe ich in meinem Projekt alle URLs und Dateipfade als unterstrichenen blauen Text gestaltet:<br> </p> <pre class="brush:php;toolbar:false">console.log('\x1b[4;34m', './underlined/blue', '\x1b[0m') </pre> <p>Schauen Sie sich dieses Cheatsheet an, um mehr zum Thema zu erfahren.</p> <h2> Einpacken </h2> <p>Man weiß nie, wann eine Routineaufgabe zu einem lohnenden Nebenprojekt inspirieren könnte. Die Entwicklung von starlight-to-pdf lieferte wertvolle Erfahrungen mit Puppeteer und CLI-Styling, und in der Open-Source-Community entstand ein neues Tool. Hier ist eine kurze Demonstration:</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173690789360353.jpg" class="lazy" alt="Transforming Starlight into PDF: experience and insights"></p> <p>Das obige ist der detaillierte Inhalt vonStarlight in PDF umwandeln: Erfahrungen und Erkenntnisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Static</a> <a href="javascript:void(0);">Array</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">date</a> <a href="javascript:void(0);">Error</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">console</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">everything</a> <a href="javascript:void(0);">Other</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Verwendung des LRU-Cache in Node.js und TypeScript" href="https://m.php.cn/de/faq/1796753817.html">Verwendung des LRU-Cache in Node.js und TypeScript</a></span><span>Nächster Artikel：<a class="dBlack" title="Verwendung des LRU-Cache in Node.js und TypeScript" href="https://m.php.cn/de/faq/1796753834.html">Verwendung des LRU-Cache in Node.js und TypeScript</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>