recherche

Maison  >  Article  >  interface Web  >  Comment implémenter la fonction d'aperçu avant impression en javascript

Comment implémenter la fonction d'aperçu avant impression en javascript

PHPz
PHPzoriginal
2023-04-19 14:13:381891parcourir

Avec le développement rapide de la technologie des réseaux, les applications Internet sont de plus en plus répandues, dont les applications Web sont également devenues un élément indispensable. Dans de nombreuses applications Web, la fonction d'impression est une fonction très importante, mais dans différents navigateurs et systèmes d'exploitation, l'effet d'impression peut être différent, nous devons donc effectuer un aperçu avant impression pour garantir l'exactitude de l'effet d'impression. La méthode d'implémentation de l'aperçu avant impression en JavaScript a également attiré de plus en plus l'attention des développeurs.

Connaissances préalables

Avant d'introduire la méthode d'implémentation de l'aperçu avant impression en javascript, nous devons comprendre certaines connaissances préalables :

  1. méthode window.print()

window.print() est la méthode fournie avec javascript, principalement Utilisé pour implémenter la fonction d'impression. Après avoir appelé cette méthode, le navigateur commencera directement à imprimer la page en cours.

  1. Style d'impression CSS

Dans l'aperçu avant impression, le style CSS est également un élément très important. Nous pouvons contrôler la mise en page, les polices, les couleurs, etc. de la page imprimée grâce aux styles CSS.

  1. Taille de la page d'impression

Différents appareils peuvent avoir des formats de papier d'impression différents, nous devons donc ajuster la mise en page de la page imprimée en fonction du format du papier d'impression de l'appareil.

  1. méthode window.matchMedia()

window.matchMedia() est une méthode fournie avec JavaScript et est principalement utilisée pour déterminer la taille d'affichage de l'appareil actuel. Nous pouvons utiliser cette méthode pour ajuster les effets d’affichage pour différents appareils.

Étapes de mise en œuvre

Avec la base des connaissances préalables, nous pouvons commencer à introduire la méthode d'implémentation de l'aperçu avant impression en javascript.

  1. Créer un bouton d'impression

Tout d'abord, nous devons créer un bouton d'impression dans la page afin que les utilisateurs puissent cliquer sur le bouton pour déclencher la fonction d'aperçu avant impression. Le code du bouton est le suivant : 

<button onclick="printPreview()">打印预览</button>
  1. Créer une fonction d'aperçu avant impression

Dans le bouton d'impression, nous devons appeler une fonction appelée printPreview() pour implémenter la fonction d'aperçu avant impression. Le code de la fonction est le suivant : 

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Dans le code ci-dessus, nous créons d'abord une nouvelle fenêtre nommée printWindow et ajoutons la feuille de style et le code HTML à la fenêtre. Notez que nous utilisons ici une feuille de style CSS appelée print.css, qui ne prendra effet qu’à l’impression. Ensuite, nous définissons le style d'impression et les propriétés de la nouvelle fenêtre, et faisons apparaître la fenêtre à l'écran pour un aperçu avant impression. Enfin, nous fermons la fenêtre lorsque nous avons fini d'imprimer.

  1. Définir le style d'impression

Dans la fonction d'aperçu avant impression, nous avons ajouté une feuille de style CSS pour l'impression. Voici le code d'un exemple de fichier print.css, qui contient certains styles d'impression couramment utilisés : 

/*隐藏页面中的所有元素*/
* {
  display:none;
}

/*显示需要打印的区域*/
#printContent {
  display:block;
}

/*设置打印页面的字体和颜色*/
body {
  font-family:宋体, Arial;
  font-size:16px;
  color:#000;
}

/*为打印页面进行分页*/
.my-pagebreak{
  page-break-after: always;
}

/*设置打印页面的边距*/
@media print {
  @page {
    margin:20mm 15mm !important;
  }
}

Ici, nous utilisons CSS pour masquer tous les éléments de la page et afficher uniquement la zone qui doit être imprimée. En même temps, nous définissons la police et la couleur de la page imprimée, ainsi que la pagination et les marges de la page.

  1. Ajuster la mise en page

Le format du papier d'impression des différents appareils peut être différent, nous devons donc ajuster la mise en page de la page imprimée en fonction du format du papier d'impression de l'appareil. Nous pouvons utiliser la méthode window.matchMedia() pour déterminer la taille d'affichage de l'appareil actuel et ajuster la mise en page de la page imprimée en conséquence. Le code est le suivant : 

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //根据设备的显示尺寸调整页面布局
  if (window.matchMedia('print and (max-width: 768px)').matches) {
    //设备宽度小于768px，调整页面布局
    //...
  } else if (window.matchMedia('print and (max-width: 992px)').matches) {
    //设备宽度小于992px，调整页面布局
    //...
  } else {
    //设备宽度大于等于992px，调整页面布局
    //...
  }

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Dans le code ci-dessus, nous utilisons la méthode window.matchMedia() pour déterminer la taille d'affichage de l'appareil actuel et ajuster la mise en page en fonction de différentes plages de largeur. Selon la situation réelle, nous pouvons ajuster nous-mêmes la mise en page de la page imprimée.

Résumé

La mise en œuvre Javascript de l'aperçu avant impression peut nous permettre de contrôler l'effet des pages imprimées avec plus de précision et d'exactitude, améliorant ainsi notre expérience d'impression. Il convient de noter que pendant le processus de mise en œuvre, nous devons ajuster le style et la mise en page en fonction des différentes tailles d'appareils et des caractéristiques du navigateur afin de garantir la cohérence de l'effet d'impression. Dans le même temps, nous pouvons également utiliser d’autres technologies, telles que les règles @page de CSS3, pour améliorer encore le contrôle de l’effet de page d’impression.

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 css3 html print 样式表
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：Puis-je créer un site Web sans apprendre JavaScript ?Article suivant：Puis-je créer un site Web sans apprendre JavaScript ?

Articles Liés

Voir plus