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 Dokumentkörper 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 Druckdialog des Systems die Option „In Datei drucken“.

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:

$("#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();
});

Mit diesem Ansatz können Sie HTML-Elemente effizient als PDFs speichern und gleichzeitig ihre visuelle Ästhetik durch CSS-Stil beibehalten.