Comment définir la taille du papier de la page en javascript

JavaScript peut nous aider à définir dynamiquement une série de propriétés de la page Web, notamment le format du papier. Cette fonctionnalité peut être utilisée pour créer une page d'impression adaptative qui répond aux différents besoins d'impression de l'utilisateur. Dans cet article, nous allons vous montrer comment utiliser JavaScript pour définir le format de papier de la page et utiliser des feuilles de style pour optimiser les pages à imprimer.

1. Définir le format du papier de la page Web

Il existe deux manières principales de définir le format du papier de la page Web : l'une consiste à définir le format du papier via des feuilles de style CSS, et l'autre consiste à définir dynamiquement le format du papier via JavaScript.

1. Feuille de style CSS pour définir la taille du papier

Vous pouvez définir la taille du papier de la page Web via la feuille de style CSS. En CSS, nous pouvons utiliser la règle @page pour contrôler les propriétés de la page imprimée. Vous trouverez ci-dessous un exemple montrant comment utiliser une feuille de style CSS pour définir le format du papier. @page 规则来控制打印页的属性。下面是一个示例，展示了如何使用 CSS 样式表来设置纸张大小。

@page {
  size: A4 landscape;
}

在上面的代码中，我们设置了纸张大小为 A4（210mm × 297mm）横向。类似的，我们也可以设置成其他尺寸，如 A5 纵向、信纸横向等等。这种 CSS 设置方式非常简单，但存在一个问题：并非所有的浏览器都支持 @page 规则。因此，我们需要考虑到浏览器的兼容性问题。

2. JavaScript 动态设置纸张大小

如果我们需要更好地控制纸张大小，可以使用 JavaScript 动态设置纸张大小。JavaScript 提供了一个 print 方法用于打印当前窗口或指定的文档。在 print 方法中，我们可以使用 pageWidth 和 pageHeight 属性来控制纸张的大小。下面是一个简单的示例，展示了如何使用 JavaScript 动态设置纸张大小。

function printPage() {
  var printPageWidth = 210;
  var printPageHeight = 297;

  // 创建一个新的打印窗口
  var printWindow = window.open('', '', 'width=794, height=1123');

  // 通过标准化处理来计算纸张大小
  printPageWidth = Math.floor(printPageWidth * 3.779527559) + 'px';
  printPageHeight = Math.floor(printPageHeight * 3.779527559) + 'px';

  // 设置纸张大小
  printWindow.document.body.style.width = printPageWidth;
  printWindow.document.body.style.height = printPageHeight;

  // 写入要打印的内容
  printWindow.document.write('<h1>Hello World!</h1>');

  // 关闭写入流，开始打印
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

在上面的代码中，我们首先定义了纸张的宽度和高度。然后，我们根据标准化处理将这两个值转换为像素单位，并设置给打印窗口的 body 元素。接着，我们向新打开的窗口中写入一些要打印的内容。最后，我们调用 print() 方法来触发打印功能，打印完成后关闭窗口。

需要注意的是，这种方式需要手动触发打印，而且它也不能避免浏览器的兼容性问题。因此，我们需要考虑在使用前仔细测试和调试。

二、使用样式表优化打印页面

在实现自适应打印页面的过程中，样式表起到了至关重要的作用。下面是一些使用样式表来优化打印页面的技巧。

1. 手动设置页眉页脚

使用样式表来设置自定义页眉页脚，可以让我们的打印页面更加专业。下面是一个简单的示例，展示了如何使用 CSS 样式表来设置页眉页脚。

@media print {
  @page {
    size: A4 portrait;
    margin: 1cm;
    @top-center { content: "MY HEADER"; }
    @bottom-center { content: "MY FOOTER"; }
  }
}

在上面的代码中，我们使用 @content 属性来定义自定义的页眉和页脚。这样，我们就可以在打印页面中添加我们自己的 Logo、地址和联系方式等内容。

2. 隐藏不必要的元素

在打印页面中，有些元素并不需要打印，如菜单栏、横幅和广告等内容。因此，我们需要使用样式表来隐藏这些元素。下面是一个简单的示例，展示了如何使用 CSS 样式表来隐藏元素。

@media print {
  #menu, #banner, .ad {
    display: none !important;
  }
}

在上面的代码中，我们使用 display 属性来隐藏菜单栏、横幅和广告等元素。这里需要注意的是，由于我们需要确保这些元素不会被打印，因此我们使用了 @media print 伪类以及 !importantrrreee

Dans le code ci-dessus, nous définissons le format de papier sur A4 (210 mm × 297 mm) paysage. De même, nous pouvons également le définir sur d'autres formats, tels que A5 portrait, lettre paysage, etc. Cette façon de configurer CSS est très simple, mais il y a un problème : tous les navigateurs ne prennent pas en charge la règle @page. Par conséquent, nous devons prendre en compte les problèmes de compatibilité des navigateurs.

2. JavaScript pour définir dynamiquement le format du papier

Si nous avons besoin d'un meilleur contrôle sur le format du papier, nous pouvons utiliser JavaScript pour définir dynamiquement le format du papier. JavaScript fournit une méthode print pour imprimer la fenêtre actuelle ou le document spécifié. Dans la méthode print, nous pouvons utiliser les propriétés pageWidth et pageHeight pour contrôler le format du papier. Vous trouverez ci-dessous un exemple simple montrant comment définir dynamiquement le format du papier à l'aide de JavaScript. 🎜rrreee🎜Dans le code ci-dessus, nous définissons d'abord la largeur et la hauteur du papier. Nous convertissons ensuite ces deux valeurs en unités de pixels selon le processus de normalisation et les définissons sur l'élément body de la fenêtre d'impression. Ensuite, nous écrivons du contenu à imprimer dans la fenêtre nouvellement ouverte. Enfin, nous appelons la méthode print() pour déclencher la fonction d'impression et fermer la fenêtre une fois l'impression terminée. 🎜🎜Il est à noter que cette méthode nécessite un déclenchement manuel de l'impression, et elle ne peut éviter les problèmes de compatibilité des navigateurs. Par conséquent, nous devons envisager des tests et un débogage minutieux avant utilisation. 🎜🎜2. Utilisez des feuilles de style pour optimiser les pages d'impression🎜🎜Dans le processus de réalisation de pages d'impression adaptatives, les feuilles de style jouent un rôle essentiel. Voici quelques conseils pour utiliser les feuilles de style afin d’optimiser les pages imprimées. 🎜🎜1. Définir manuellement les en-têtes et les pieds de page🎜🎜L'utilisation de feuilles de style pour définir des en-têtes et des pieds de page personnalisés peut rendre nos pages imprimées plus professionnelles. Vous trouverez ci-dessous un exemple simple montrant comment définir un en-tête et un pied de page à l'aide d'une feuille de style CSS. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons l'attribut @content pour définir un en-tête et un pied de page personnalisés. De cette façon, nous pouvons ajouter notre propre logo, adresse, coordonnées, etc. à la page imprimée. 🎜🎜2. Masquer les éléments inutiles🎜🎜Dans la page imprimée, certains éléments n'ont pas besoin d'être imprimés, comme les barres de menus, les bannières, les publicités, etc. Par conséquent, nous devons utiliser une feuille de style pour masquer ces éléments. Vous trouverez ci-dessous un exemple simple montrant comment utiliser une feuille de style CSS pour masquer un élément. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons l'attribut display pour masquer des éléments comme la barre de menus, les bannières et les publicités. Il convient de noter ici que puisque nous devons nous assurer que ces éléments ne seront pas imprimés, nous utilisons la pseudo-classe @media print et le mot-clé !important pour garantir que les règles de style Priorité la plus élevée. 🎜🎜3. Conclusion🎜🎜Dans cet article, nous avons présenté comment utiliser JavaScript pour définir dynamiquement la taille du papier de la page et utiliser des feuilles de style CSS pour optimiser la page imprimée. Il convient de noter que des tests et un débogage suffisants sont nécessaires lors de l'utilisation de ces techniques pour garantir la compatibilité entre les différents navigateurs et appareils. Si nous pouvons utiliser ces techniques correctement, nous pouvons créer une excellente page d’impression adaptative et offrir une meilleure expérience d’impression aux utilisateurs. 🎜

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!