Maison > interface Web > tutoriel CSS > Comment capturer un bloc de code au format PDF tout en préservant le style CSS dans un navigateur ?

Comment capturer un bloc de code au format PDF tout en préservant le style CSS dans un navigateur ?

Patricia Arquette
Libérer: 2024-10-23 15:50:02
original
613 Les gens l'ont consulté

How to Capture a Code Block as PDF while Preserving CSS Styling in a Browser?

Téléchargement du pré-élément en surbrillance au format PDF avec préservation CSS

Pour enregistrer un pré-élément au format PDF tout en préservant le style CSS, vous pouvez utiliser un méthode qui consiste à ouvrir une nouvelle fenêtre, à injecter le HTML et le CSS et à imprimer dans un fichier PDF.

Solution :

  1. Ouvrez une nouvelle fenêtre et concentrez-vous it.
  2. Ajoutez le HTML de l'élément pré et les styles CSS nécessaires au corps du document de la nouvelle fenêtre.
  3. Appelez la méthode .focus() sur la nouvelle fenêtre.
  4. Appelez la méthode .print() dans la nouvelle fenêtre.
  5. Dans la boîte de dialogue d'impression du système, sélectionnez "Imprimer dans un fichier" et enregistrez le PDF.

Voici le code jQuery que vous pouvez utiliser :

$("#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();
});
Copier après la connexion

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