Comment préserver le style CSS lors de l'enregistrement d'un élément « pré » au format PDF ?

Préserver le style CSS lors de l'enregistrement de l'élément 'pré' au format PDF

Dans la quête d'étendre la fonctionnalité de coloration syntaxique avec des capacités d'enregistrement PDF, un élément crucial Un aspect souvent négligé est la préservation du style CSS. Alors que les approches conventionnelles peuvent produire des PDF dépourvus d'informations de style vitales, il existe une solution qui garantit le transfert fidèle des attributs CSS.

Pour répondre à cette question, la clé réside dans l'exploitation d'une combinaison de fonctionnalités de navigation Web. En créant dynamiquement une nouvelle fenêtre de navigateur, en ajoutant les éléments HTML et CSS nécessaires et en invoquant la fonctionnalité d'impression, nous pouvons contourner les limitations imposées par les méthodes de génération PDF ordinaires.

L'extrait de code suivant illustre cette approche :

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

Dans ce code, le gestionnaire de clics capture le contenu HTML de l'élément 'pre', ainsi que les informations de style de l'élément CSS. Une nouvelle fenêtre contextuelle est créée et les éléments HTML et CSS combinés sont ajoutés à son corps. En appelant .focus() et .print() dans la fenêtre contextuelle, nous déclenchons la fonctionnalité d'impression du système et ouvrons la boîte de dialogue d'impression. En sélectionnant « Imprimer dans un fichier », vous pouvez enregistrer la sortie au format PDF avec tout le style CSS d'origine intact.

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!