Wie behalte ich den CSS-Stil beim PDF-Export von Pre-Elementen bei?

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 Pre ein Element, einschließlich aller relevanten Stile, in den Dokumentkörper des neuen Fensters.
3. Fokus und Drucken: Konzentrieren Sie sich 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

<code class="javascript">$("#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();
});</code>

Ü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-Medienabfragen nach Bedarf an, um eine optimale Formatierung sicherzustellen im PDF.

Fazit

Durch die Implementierung dieser Techniken können Sie Vorelemente effektiv als PDFs speichern und gleichzeitig ihren CSS-Stil beibehalten, sodass Benutzer den hervorgehobenen Code problemlos teilen und archivieren können genaue Darstellung.

Das obige ist der detaillierte Inhalt vonWie behalte ich den CSS-Stil beim PDF-Export von Pre-Elementen bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!