Comment enregistrer du contenu HTML au format PDF avec un style CSS préservé ?

Enregistrement du contenu HTML avec CSS au format PDF

Dans le développement Web, la préservation de l'esthétique visuelle est cruciale, même lors de l'exportation de contenu vers différents formats. Cela peut présenter des difficultés lorsque vous tentez d'enregistrer des éléments HTML au format PDF, car le style CSS peut être perdu pendant le processus de conversion.

Dans les cas où il est impératif de conserver le CSS dans les PDF enregistrés, envisagez d'utiliser l'approche suivante :

1. Créer une nouvelle fenêtre :Ouvrez une nouvelle fenêtre de navigateur dédiée à l'enregistrement du contenu au format PDF.
2. Ajoutez du HTML et du CSS : Ajoutez le code HTML de l'élément que vous souhaitez enregistrer au corps du document de la nouvelle fenêtre. De plus, incluez tout style CSS nécessaire à l'apparence de l'élément.
3. Concentration et impression : Concentrez-vous sur la nouvelle fenêtre et lancez le processus d'impression. Dans la boîte de dialogue d'impression du système, sélectionnez l'option « Imprimer dans un fichier ».

Cette méthode préserve efficacement le style CSS en garantissant que l'apparence de l'élément est fidèlement restituée lorsqu'il est enregistré au format PDF. Voici un extrait de code JavaScript qui illustre l'approche :

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

En adoptant cette approche, vous pouvez enregistrer efficacement des éléments HTML au format PDF tout en conservant leur esthétique visuelle grâce au style CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!