Comment préserver le style CSS dans les exportations PDF de pré-éléments ?

Préserver le style CSS dans les exportations PDF des pré-éléments

Dans le scénario d'un surligneur de syntaxe qui offre la possibilité d'enregistrer le code en surbrillance au format PDF, en conservant le style CSS est crucial pour préserver l'esthétique et la fonctionnalité du code en surbrillance.

Enregistrer les pré-éléments au format PDF avec CSS

Pour enregistrer un pré-élément au format PDF tout en conservant ses styles CSS, envisagez l'approche suivante :

1. Créer une nouvelle fenêtre : ouvrez une nouvelle fenêtre de navigateur.
2. Ajouter du HTML et des styles : insérez le HTML du pré élément, y compris tous les styles pertinents, dans le corps du document de la nouvelle fenêtre.
3. Mise au point et impression : concentrez-vous sur la nouvelle fenêtre et lancez le processus d'impression.
4. Boîte de dialogue d'impression système : dans la boîte de dialogue d'impression système, sélectionnez l'option « Imprimer dans un fichier » pour enregistrer le code en surbrillance au format PDF.

Exemple de code

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

Considérations sur la mise en œuvre

• Assurez-vous que la variable styles contient soit l'élément de style, soit des informations de style en ligne pertinentes pour l'élément pré.
• Ajustez les requêtes multimédias CSS si nécessaire pour garantir un formatage optimal. dans le PDF.

Conclusion

En mettant en œuvre ces techniques, vous pouvez enregistrer efficacement les pré-éléments au format PDF tout en préservant leur style CSS, permettant aux utilisateurs de partager et d'archiver facilement le code en surbrillance avec présentation précise.

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!