Beibehalten des CSS-Stils in PDF-Exporten von Vorelementen

Im Szenario eines Syntax-Highlighters, der die Option bietet, hervorgehobenen Code als PDF zu speichern und dabei den CSS-Stil beizubehalten ist entscheidend, um die Ästhetik und Funktionalität des hervorgehobenen Codes zu bewahren.

Pre-Elemente als PDF mit CSS speichern

Um ein Pre-Element als PDF zu speichern und dabei seine CSS-Stile beizubehalten, sollten Sie den folgenden Ansatz in Betracht ziehen :

1. Neues Fenster erstellen: Öffnen Sie ein neues Browserfenster.
2. HTML und Stile anhängen: Fügen Sie den HTML-Code des Vorworts ein Element, einschließlich aller relevanten Stile, in den Dokumentkörper des neuen Fensters.
3. Fokus und Drucken: Fokussieren Sie auf das neue Fenster und starten Sie den Druckvorgang.
4. Systemdruckdialog: Wählen Sie im Systemdruckdialog die Option „In Datei drucken“, um den hervorgehobenen Code als PDF zu speichern.

Codebeispiel

$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // retrieve and append `style` element, or define inline styling
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text   styles;
  popup.focus();
  popup.print();
});

Überlegungen zur Implementierung

• Stellen Sie sicher, dass die Styles-Variable entweder das Style-Element oder Inline-Styling-Informationen enthält, die für das Pre-Element relevant sind.
• Passen Sie die CSS-Medien an Abfragen nach Bedarf, um eine optimale Formatierung im PDF sicherzustellen.

Schlussfolgerung

Durch die Implementierung dieser Techniken können Sie Vorelemente effektiv als PDFs speichern und gleichzeitig ihren CSS-Stil beibehalten, sodass Benutzer dies problemlos tun können Teilen und archivieren Sie den hervorgehobenen Code mit präziser Darstellung.