Wie speichere ich HTML-Inhalte als PDF mit beibehaltenem CSS-Stil?

HTML-Inhalte mit CSS als PDF speichern

Bei der Webentwicklung ist die Wahrung der visuellen Ästhetik von entscheidender Bedeutung, auch beim Exportieren von Inhalten in verschiedene Formate. Dies kann beim Versuch, HTML-Elemente als PDFs zu speichern, zu Herausforderungen führen, da der CSS-Stil während des Konvertierungsprozesses verloren gehen kann.

In Fällen, in denen es unbedingt erforderlich ist, CSS in gespeicherten PDFs beizubehalten, sollten Sie den folgenden Ansatz in Betracht ziehen:

1. Neues Fenster erstellen: Öffnen Sie ein neues Browserfenster zum Speichern des Inhalts als PDF.
2. HTML und CSS anhängen: Hängen Sie den HTML-Code des Elements, das Sie speichern möchten, an den Dokumenttext des neuen Fensters an. Fügen Sie außerdem alle CSS-Stile hinzu, die für das Erscheinungsbild des Elements erforderlich sind.
3. Fokus und Drucken: Konzentrieren Sie sich auf das neue Fenster und starten Sie den Druckvorgang. Wählen Sie im Systemdruckdialog die Option „In Datei drucken“ aus.

Diese Methode bewahrt effektiv den CSS-Stil, indem sie sicherstellt, dass das Erscheinungsbild des Elements beim Speichern als PDF originalgetreu wiedergegeben wird. Hier ist ein JavaScript-Snippet, das den Ansatz demonstriert:

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // `styles`: `style` element; 
  // or `String` "<style>.light{color:#0af;}</style>" ;
  // alternatively , add `style` attribute to `pre` element directly,
  // e.g., `<pre style="color:#0af;">`
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  // append `text`:`pre` element `styles`:`style` element
  // at `popup` `document.body`
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

Durch die Übernahme dieses Ansatzes können Sie HTML-Elemente effizient als PDFs speichern und gleichzeitig ihre visuelle Ästhetik durch CSS-Stil beibehalten.

Das obige ist der detaillierte Inhalt vonWie speichere ich HTML-Inhalte als PDF mit beibehaltenem CSS-Stil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!