Maison > Article > interface Web > paramètres javascript imprimer

paramètres javascript imprimer

WBOYoriginal: 2023-05-17 18:07:381499parcourir

Paramètres Javascript pour l'impression

Dans les applications web, la fonction d'impression est souvent indispensable. Javascript offre un moyen pratique de configurer l'impression afin de garantir la meilleure expérience utilisateur lors de l'impression de la page. Dans cet article, nous allons vous présenter comment paramétrer l’impression en Javascript, découvrons-le ensemble !

Définir le style d'impression

En pratique, nous devons nous assurer que le style de la page imprimée répond au mieux aux besoins de l'utilisateur. Contrairement aux affichages sur écran, les styles imprimés doivent être plus détaillés et plus clairs. Grâce à Javascript, nous pouvons facilement définir des styles d'impression pour garantir que le contenu imprimé répond à l'expérience utilisateur.

Tout d'abord, nous devons utiliser CSS pour le style d'impression. Cette approche est similaire à l'utilisation de CSS pour modifier le style de la page. Par exemple, dans l'exemple suivant, nous définirons la taille de la police et la couleur de la page pour l'impression :

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Set Print Style</title>
  <style>
    @media print {
      body {
        font-size: 12px;
        color: #333;
      }
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is an example paragraph.</p>
</body>
</html>

Ici, nous utilisons la directive @media print pour définir le CSS d'impression. Notez qu'il existe une directive @media dans ce style pour garantir que ces styles ne conviennent qu'aux imprimantes et ne seront pas affichés dans les navigateurs. Nous définissons la taille de la police sur 12px et la couleur sur #333. Cela garantira que lorsque la page est imprimée, la taille de la police et les couleurs sont les mêmes qu'elles apparaissent à l'écran. La même technique peut être appliquée à d’autres styles, tels que la couleur d’arrière-plan et les marges extérieures.

Définir le contenu de la page imprimée

Dans certains cas, nous devons masquer certains contenus pour simplifier la page imprimée et garantir que seules les informations les plus nécessaires sont affichées. En utilisant Javascript, nous pouvons facilement masquer n'importe quel élément de la page.

Le code Javascript suivant montre comment masquer des éléments dans la page :

function hideElements() {
  var elements = document.getElementsByTagName('div');

  for (var i=0; i<elements.length; i++) {
    elements[i].style.display = 'none';
  }
}

window.onload = hideElements;

Dans cet exemple, nous définissons d'abord une fonction appelée hideElements. Dans cette fonction, nous utilisons la méthode getElementsByTagName pour obtenir tous les éléments div de la page. Nous utilisons ensuite une boucle for pour parcourir chaque balise div et les définir sur "aucune" à l'aide de la propriété style.display, qui les masquera. Enfin, nous lions cette fonction à l'événement window.onload pour garantir que cette fonction est exécutée lors du chargement de la page.

Définir la mise en page de la page imprimée

Parfois, nous devons nous assurer que la mise en page du contenu de la page répond autant que possible aux exigences lors de l'impression. Grâce à Javascript, nous pouvons facilement modifier la mise en page pour garantir que le contenu imprimé répond aux besoins de l'utilisateur.

Le code Javascript suivant montre comment définir la mise en page d'une page imprimée :

function setPrintLayout() {
  var style = document.createElement('style');
  style.innerHTML = '@page {size: A4 portrait;}';
  document.head.appendChild(style);
}

window.onload = setPrintLayout;

Ici, nous définissons une fonction appelée setPrintLayout. Dans cette fonction, nous créons un élément de style à l'aide de la méthode createElement. Ensuite, nous utilisons innerHTML pour définir le style CSS, "@page {size: A4 portrait;}". Cela rendra la mise en page au format A4 avec le paramètre paysage défini sur « portrait » pour l'impression. Enfin, nous ajoutons le style à l'en-tête du document à l'aide de la méthode appendChild et appelons cette fonction lors du chargement de la page.

Résumé

Dans cet article, nous avons présenté comment configurer l'impression à l'aide de Javascript. En définissant les styles d'impression, en masquant et en disposant les éléments de la page, nous pouvons facilement garantir que les pages imprimées offrent la meilleure expérience utilisateur. Si vous développez une application Web et devez fournir une fonctionnalité d'impression, l'utilisation de cette technique Javascript simple peut être utile.

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!

JavaScript css print for 循环事件 innerHTML display

Déclaration：

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

Article précédent：Les images JavaScript ne peuvent pas être affichéesArticle suivant：Les images JavaScript ne peuvent pas être affichées

Articles Liés

Voir plus