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

Dans le scénario d'un surligneur de syntaxe offrant 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 code HTML et des styles : insérez le code HTML du pré élément, y compris tous les styles pertinents, dans le corps du document de la nouvelle fenêtre.
3. Concentration 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

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

Considérations relatives à l'implémentation

• 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 pre.
• Ajustez le média CSS requêtes 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 facilement partagez et archivez le code en surbrillance avec une présentation précise.