Wie behalte ich den CSS-Stil beim Speichern des Syntax Highlighter Pre-Elements als PDF bei?

So speichern Sie ein Syntax-Highlighter-Vorelement als PDF unter Beibehaltung des CSS-Stils

So speichern Sie ein Syntax-Highlighter-Vorelement als PDF Wenn Sie das CSS beibehalten möchten, ziehen Sie diesen alternativen Ansatz in Betracht:

Lösung:

1. Neues Fenster erstellen: Öffnen Sie ein neues Browserfenster mit window .open().
2. HTML und CSS anhängen: Den HTML-Inhalt des pre-Elements ($("#output")[0].outerHTML) und alle erforderlichen CSS-Stile anhängen ( $("style")[0].outerHTML) zum Hauptteil des neuen Fensters.
3. Fokus und Drucken: Rufen Sie .focus() und .print() im neuen Fenster auf . Dadurch wird der Druckdialog des Systems ausgelöst, in dem Sie „In Datei drucken“ auswählen können, um das Vorelement als PDF zu speichern.

jQuery-Implementierung:

<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>

Demonstration:

Sie können diese Lösung im folgenden jsfiddle in Aktion sehen: http://jsfiddle.net/tn04Ldka/2/

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