Wie behalte ich den CSS-Stil beim Speichern des „pre“-Elements als PDF bei?

Beibehalten des CSS-Stils beim Speichern des „Pre“-Elements als PDF

Bei der Suche nach einer Erweiterung der Syntaxhervorhebungsfunktion um PDF-Speicherfunktionen ist ein entscheidender Faktor Ein Aspekt, der oft übersehen wird, ist die Beibehaltung des CSS-Stils. Während herkömmliche Ansätze zu PDFs führen können, denen wichtige Stilinformationen fehlen, gibt es eine Lösung, die die originalgetreue Übertragung von CSS-Attributen gewährleistet.

Um die Frage zu beantworten, liegt der Schlüssel in der Nutzung einer Kombination von Webbrowserfunktionen. Indem wir dynamisch ein neues Browserfenster erstellen, die erforderlichen HTML- und CSS-Elemente anhängen und die Druckfunktion aufrufen, können wir die Einschränkungen umgehen, die durch gewöhnliche PDF-Generierungsmethoden auferlegt werden.

Der folgende Codeausschnitt veranschaulicht diesen Ansatz:

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

In diesem Code erfasst der Click-Handler den HTML-Inhalt des „pre“-Elements zusammen mit den Stilinformationen aus dem CSS-Element. Ein neues Popup-Fenster wird erstellt und die kombinierten HTML- und CSS-Elemente werden an seinen Text angehängt. Durch den Aufruf von .focus() und .print() im Popup-Fenster lösen wir die Druckfunktionalität des Systems aus und öffnen den Druckdialog. Durch Auswahl von „In Datei drucken“ können Sie die Ausgabe als PDF speichern, wobei der gesamte ursprüngliche CSS-Stil erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie behalte ich den CSS-Stil beim Speichern des „pre“-Elements als PDF bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!