Imprimer la page en HTML

1. Cachez le contenu avec display:none à l’intérieur de @media print pour imprimer un contenu spécifique en HTML
2. Passez l’id à l’écouteur d’événement onClick pour imprimer un contenu spécifique en HTML

Cet article présentera quelques méthodes pour imprimer le contenu spécifique d’une page en HTML.

Cachez le contenu avec display:none à l’intérieur de @media print pour imprimer un contenu spécifique en HTML

Nous pouvons utiliser CSS pour modifier l’apparence de la page Web lorsqu’elle est imprimée sur papier. Nous pouvons définir un style CSS sur le Web et un autre style CSS lors de l’impression du contenu Web.

La règle CSS @media print permet de changer le style des contenus HTML lors de leur impression.

Nous avons besoin de JavaScript pour imprimer le contenu HTML. La méthode window.print() permet d’imprimer la fenêtre en cours.

La méthode print() ouvre la boîte de dialogue Print, qui vous permet de sélectionner les options d’impression préférées. Nous pouvons appeler window.print() après avoir cliqué sur un bouton pour imprimer la fenêtre actuelle.

En utilisant @media print, nous pouvons définir la propriété display sur none pour le contenu HTML que nous ne voulons pas imprimer. Cela n’affichera pas le contenu HTML dans l’option d’impression malgré la présence de ce contenu sur le Web.

Par exemple, en HTML, créez deux titres à l’aide de la balise h1. Nommez le premier en-tête Need to print this et le second en-tête Don't need to print this.

Donnez le nom de la classe pour le deuxième en-tête comme dontPrint. Créez ensuite un bouton et nommez-le Print.

Donnez également à ce bouton le nom de classe dontPrint. Créez un écouteur onClick pour le bouton et appelez la méthode window.print() lorsque le bouton est cliqué.

Dans la section CSS, à l’intérieur de @media print, définissez la propriété d’affichage de la classe nommée dontPrint sur none.

L’exemple ci-dessous montre que l’en-tête et le bouton ayant le nom de classe dontPrint ne s’affichent pas dans la section d’impression lorsque le bouton Print est cliqué.

Exemple de code :

<h1>
  Need to print this
</h1>
<h1 class="dontPrint">
  Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
  Print
</button>

@media print {
 .dontPrint{
 display:none;
 }
}

Passez l’id à l’écouteur d’événement onClick pour imprimer un contenu spécifique en HTML

Dans cette méthode, nous pouvons créer un identifiant du contenu spécifique à imprimer. Ensuite, nous pouvons passer le id à une fonction JavaScript à l’aide de l’écouteur d’événement onClick.

Le JavaScript imprime le contenu spécifié avec la méthode window.print().

La propriété innerHTML définit ou renvoie le contenu HTML d’un élément. Nous pouvons l’utiliser pour sélectionner le contenu imprimé en JavaScript avec la méthode document.getElementById().

De même, nous pouvons conserver le contenu original du document HTML en utilisant la propriété innerHTML avec la propriété document.body. Après avoir imprimé le contenu, nous pouvons définir le contenu original du document HTML dans la propriété document.body.innerHTML.

Voyons les instructions ci-dessous pour le comprendre plus clairement.

Par exemple, créez un div et donnez-lui un id de printIt. À l’intérieur de ce div, créez une balise h1 et écrivez Need to print this à l’intérieur.

En dehors du div, créez un bouton et nommez-le Print. Créez un écouteur onclick pour le bouton et appelez la fonction printOut avec l’identifiant printIt comme paramètre.

Dans la section JavaScript, créez une fonction nommée printOut avec un argument divId. Créez une variable nommée printOutContent pour stocker innerHTML du divId.

Ensuite, créez une autre variable originalContent pour stocker le innerHTMl du corps HTML. La démonstration est présentée ci-dessous.

var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;

Ensuite, définissez innerHTML du corps à la variable printOutContent.

Appelez ensuite la méthode window.print(). Après avoir appelé la méthode, définissez innerHTML du corps sur la variable originalContent.

document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;

Ici, lorsque nous appelons la méthode window.print(), elle n’imprimera que la section de l’id divId car document.body.innerHTML ne contient que l’élément à imprimer. Une fois le contenu imprimé, le contenu de l’ensemble du document HTML est défini sur son état d’origine.

Ainsi, nous avons imprimé un contenu spécifique d’un document HTML en utilisant JavaScript.

Exemple de code :

<div id="printIt">
  <h1>
    Need to Print this
  </h1>
</div>
<button onClick="printOut('printIt')">
  Print
</button>

function printOut(divId) {
  var printOutContent = document.getElementById(divId).innerHTML;
  var originalContent = document.body.innerHTML;
  document.body.innerHTML = printOutContent;
  window.print();
  document.body.innerHTML = originalContent;
}