modification javascript avant impression

JavaScript est un langage de script largement utilisé dans les applications web. Dans le processus de développement Web, la fonction d'impression est essentielle, mais la simple utilisation de la fonction d'impression du navigateur peut conduire à des résultats insatisfaisants. Par conséquent, cet article expliquera comment modifier le style et le contenu de la page imprimée en JavaScript pour obtenir de meilleurs effets d'impression.

1. Modifier le style

1. Utiliser @media media query

@media media query fait référence à l'utilisation des règles @media dans la feuille de style. , Rendre la feuille de style efficace uniquement pour les appareils de types de médias spécifiques. Avant l'impression, nous pouvons utiliser les règles @media pour modifier le style de la page imprimée afin que la page imprimée soit plus adaptée.

L'exemple de code est le suivant :

@media print {
  /* 在这里定义修改的样式 */
}

Dans le code ci-dessus, @media print indique que nous souhaitons le modifier pour le type de support utilisé par l'imprimante, où divers des styles peuvent être ajoutés, tels que Définir la couleur d'arrière-plan :

@media print {
  body {
    background-color: #fff;
  }
}

Dans cet exemple, nous définissons la couleur d'arrière-plan de la page imprimée sur blanc.

Dans la règle @media, nous pouvons également ajouter d'autres styles, comme définir la taille et la direction de la page :

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

Dans le code ci-dessus, la règle @page est utilisée pour définir la taille et l'orientation de la page, l'attribut size est utilisé pour définir la taille de la page et portrait indique que l'orientation de la page est verticale.

2. Utilisez une feuille de style d'impression

Une feuille de style d'impression fait référence à une feuille de style spéciale qui contient des styles spécialement préparés pour l'impression. Nous pouvons l'utiliser pour modifier le style de la page imprimée avant l'impression.

L'exemple de code est le suivant :

<link rel="stylesheet" href="print.css" media="print" />

Dans le code ci-dessus, nous avons introduit une feuille de style nommée print.css dans le fichier HTML et modifié le support de la feuille de style La propriété est définie pour s'imprimer.

Dans la feuille de style print.css, nous pouvons ajouter des styles spécialement préparés pour l'impression, par exemple :

body {
  font-size: 12pt;
  line-height: 1.5;
}

Dans le code ci-dessus, nous imprimerons la taille de police du page Réglez sur 12 pt et la hauteur de ligne sur 1,5.

L'utilisation d'une feuille de style d'impression peut rendre les modifications de style plus flexibles sans affecter le style d'origine.

2. Modifier le contenu

1. Masquer les éléments inutiles

Dans les pages imprimées, nous n'avons généralement pas besoin d'afficher certains éléments, comme menus, publicités, etc. Ces éléments gaspilleront du papier et affecteront l’effet d’impression. Par conséquent, nous pouvons utiliser JavaScript pour masquer ces éléments avant l’impression.

L'exemple de code est le suivant :

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

Dans le code ci-dessus, nous obtenons d'abord un bouton avec un identifiant printBtn et y lions un événement de clic. Dans le gestionnaire d'événements, nous masquons les deux éléments avec id menu et ad en définissant leur attribut d'affichage sur « aucun » via JavaScript. Ensuite, nous effectuons une opération d'impression, puis définissons l'attribut d'affichage de ces éléments sur « bloquer » après l'impression, rétablissant ainsi leur affichage.

Il convient de noter que masquer des éléments avant l'impression peut rendre l'effet d'impression plus propre, mais lors de la mise en œuvre de la fonction, vous devez faire attention à ce que les éléments masqués n'affecteront pas les autres fonctions de la page.

2. Ajouter un en-tête et un pied de page d'impression

L'en-tête et le pied de page d'impression incluent généralement des informations importantes, telles que l'heure d'impression, le nom du fichier, etc. Nous pouvons utiliser JavaScript pour ajouter des en-têtes et des pieds de page d'impression avant l'impression.

L'exemple de code est le suivant :

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

Dans le code ci-dessus, nous obtenons d'abord un bouton avec un identifiant printBtn et y lions un événement de clic. Dans le gestionnaire d'événements, nous avons ajouté respectivement l'en-tête et le pied de page d'impression via JavaScript. Parmi eux, la méthode insertAdjacentHTML() est utilisée pour insérer du code HTML à un certain emplacement dans le document. beforebegin signifie insérer avant l'élément actuel, et afterend signifie insérer après l'élément actuel. Nous avons utilisé respectivement beforebegin et afterend ici pour ajouter l'en-tête et le pied de page au bon endroit.

Ensuite, nous avons effectué l'opération d'impression, puis une fois l'impression terminée, nous avons supprimé l'en-tête et le pied de page d'impression du document via JavaScript pour éviter d'affecter d'autres fonctions.

Résumé

Modifier le style et le contenu de la page imprimée via JavaScript peut rendre l'effet d'impression plus idéal et améliorer l'expérience utilisateur. Lors de la mise en œuvre de fonctions, nous devons prêter attention à la compatibilité et à la convivialité de la page et éviter autant que possible les problèmes inutiles.

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!