Comment contrôler le haut et la fin des pages dans les paramètres d'impression du navigateur via JavaScript ou CSS?

JavaScript et CSS peuvent-ils contrôler l'en-tête et le pied de page des paramètres d'impression du navigateur?

De nombreux développeurs souhaitent utiliser JavaScript ou CSS pour contrôler les paramètres de pied de page d'en-tête dans les boîtes de dialogue d'impression du navigateur, telles que décocher par défaut ou personnaliser le contenu de page d'en-tête. Cependant, ce n'est pas une tâche facile, et cet article explorera sa faisabilité et ses limites en profondeur.

Présentation du problème

L'objectif est de contrôler les options d'en-tête et de pied de page dans les paramètres d'impression du navigateur via le code. Les exigences spécifiques sont:

1. Le pied de page d'en-tête est désactivé par défaut: le pied de page d'en-tête n'est pas affiché par défaut lors de l'impression.
2. Footer de l'en-tête personnalisé avec @media print : contenu de pied de page d'en-tête personnalisé avec des règles de style @media print , mais cette méthode ne fonctionne pas lors de l'utilisation du plugin printJS .

Les extraits de code fournis par l'utilisateur sont les suivants:

 html2Canvas (this. $ refs.templatetoimg, {
  BackgroundColor: null,
  Usecors: vrai,
  Windowheight: document.body.scrollHeight,
}). Ensuite (canvas => {
  dom.style.height = 'calc (100vh - 400px)'
  dom.style.overflow = 'auto'
  const url = canvas.todataurl ('image / jpg')
  this.img = url
  const Styles = "@media print {@Page {height: 100%; @ top-left {Content: 'Top Content';} @ Bottom-Center {Content: 'Footer Content';}}}"
  printjs ({
    imprimable: URL,
    Type: «image»,
    DocumentTitle: this.PreViewTitle (),
    Style: Styles,
    onlokingEnd: () => {
      this.printloading = false
      dom.style.height = 'auto'
      dom.style.overflow = 'visible'
    }
  })
})

Solutions et limitations

La clé est de comprendre les points suivants:

1. Incontrollabilité des paramètres d'impression du navigateur: Les paramètres d'impression du navigateur (y compris les en-têtes et les pieds de page) sont contrôlés par le navigateur lui-même ou le système d'exploitation, et JavaScript et CSS ne peuvent pas interférer directement.
2. Limites de @media print : @media print peut contrôler le style d'impression, mais ne peut pas modifier directement les paramètres d'impression du navigateur. Le plugin printJS peut ignorer les styles définis via @media print .
3. Caractéristiques du plug-in printJS : printJS est principalement utilisé pour imprimer du contenu ou des images HTML et ne prend pas en charge la modification directe des paramètres d'impression du navigateur. Dans le code, j'ai essayé de passer le style @media print via style , mais cela n'a pas bien fonctionné dans printJS .

Par conséquent, la conclusion est: JavaScript et CSS ne peuvent pas contrôler directement les options d'en-tête et de pied de page pour les paramètres d'impression du navigateur. Cela relève du cadre des autorisations du navigateur et du système d'exploitation.

Pour personnaliser les en-têtes et les pieds de page, vous ne pouvez ajouter ces éléments que directement au contenu d'impression et vous assurer qu'ils sont visibles lorsqu'ils sont imprimés et ne sont pas affectés par le plugin d'impression. Les développeurs doivent abandonner l'idée de contrôler directement les paramètres d'impression du navigateur et de se concentrer plutôt sur la mise en œuvre d'en-têtes et de pieds de page dans le contenu d'impression lui-même.

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!