Comment définir correctement le format de papier A4 en CSS pour l'impression Chrome ?

CSS pour définir le format de papier A4

Problème :

Les utilisateurs rencontrent des difficultés pour imprimer une simulation de papier A4 à partir d'un site Web page dans Chrome, avec le contenu coupé. Le problème persiste même si la taille de l'élément est définie sur 21 cm x 29,7 cm.

Enquête :

Après une analyse plus approfondie, la cause première a été identifiée comme étant l'attribution de la valeur initiale. à la largeur de la page dans la règle du support d'impression.

Impact de la largeur : initial :

• Dans Chrome, width: initial dans l'élément .page sous la règle des supports d'impression entraîne une mise à l'échelle du contenu de la page si aucune longueur spécifique n'est fournie pour la largeur sur les éléments parents.

• Cela entraîne :

  • Le contenu est trop long pour la page d'environ 2 cm
  • Remplissage de la page dépassant les 2 cm initiaux
  • Rendu du contenu à environ 196 mm avant mise à l'échelle jusqu'à 210 mm

Solution :

Pour résoudre ce problème, définissez explicitement le format A4 largeur et hauteur du papier dans la règle du support d'impression en HTML, corps ou .page, en évitant le mot-clé initial.

Code révisé :

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print rules ... */
}

Remarque :Cette modification conserve les paramètres CSS d'origine tout en résolvant le problème de mise à l'échelle dans Chrome.

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!