Maison > interface Web > tutoriel CSS > le corps du texte

Comment préserver le style CSS lors de l'enregistrement du pré-élément du surligneur de syntaxe au format PDF ?

Mary-Kate Olsen
Libérer: 2024-10-23 16:38:01
original
647 Les gens l'ont consulté

How to Preserve CSS Styling When Saving Syntax Highlighter Pre Element as a PDF?

Comment enregistrer un pré-élément de surligneur de syntaxe en tant que PDF en préservant le style CSS

Pour enregistrer un pré-élément de surligneur de syntaxe en tant que PDF tout en en maintenant le CSS, envisagez cette approche alternative :

Solution :

  1. Créer une nouvelle fenêtre : Ouvrez une nouvelle fenêtre de navigateur à l'aide de window .open().
  2. Ajouter du HTML et du CSS : Ajoutez le contenu HTML de l'élément pré ($("#output")[0].outerHTML) et tous les styles CSS nécessaires ( $("style")[0].outerHTML) au corps de la nouvelle fenêtre.
  3. Focus et Print : Appelez .focus() et .print() sur la nouvelle fenêtre . Cela déclenchera la boîte de dialogue d'impression du système, vous permettant de sélectionner « Imprimer dans un fichier » pour enregistrer le pré-élément au format PDF.

Implémentation de jQuery :

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>
Copier après la connexion

Démonstration :

Vous pouvez voir cette solution en action sur le jsfiddle suivant : http://jsfiddle.net/tn04Ldka/2/

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!