Désactiver les options d'impression du navigateur (en-têtes, pieds de page, marges) à partir de la page?

182

J'ai vu cette question posée de différentes manières sur SO et plusieurs autres sites Web, mais la plupart d'entre eux sont soit trop spécifiques, soit obsolètes. J'espère que quelqu'un pourra fournir une réponse définitive ici sans céder à la spéculation.

Existe-t-il un moyen, avec CSS ou javascript, de modifier les paramètres par défaut de l'imprimante lorsque quelqu'un imprime dans son navigateur? Et bien sûr, par "impressions à partir de leur navigateur", je veux dire une forme de HTML, pas de PDF ou un autre type mime dépendant de plug-in.

Notez s'il vous plaît:

Si certains navigateurs offrent cela et d'autres non (ou si vous ne savez comment le faire que pour certains navigateurs), je suis d'accord avec les solutions spécifiques au navigateur.

De même, si vous connaissez un navigateur grand public qui a des restrictions spécifiques contre JAMAIS faire cela, cela est également utile, mais une documentation assez à jour serait appréciée. (Le simple fait de dire "cela va à l'encontre de la politique de sécurité de XYZ" n'est pas très convaincant lorsque XYZ a apporté des changements importants à ladite politique au cours des trois dernières années).

Enfin, quand je dis "modifier les paramètres d'impression par défaut", je ne veux pas dire pour toujours, juste pour ma page, et je fais référence spécifiquement aux marges d'impression, aux en-têtes et aux pieds de page.

Je suis très conscient que CSS offre la possibilité de modifier l'orientation de la page ainsi que les marges de la page. L'une des nombreuses difficultés concerne Firefox. Si je règle les marges de la page sur 1 pouce, cela ajoute au demi-pouce déjà mis en place.

Je souhaite vivement réduire l'utilisation des PDF sur le site de mon client, mais la violation de la présentation (ainsi que le manque de fiabilité) sont leur principale préoccupation.

javascript html css browser printing Anthony
la source
Y a-t-il une raison particulière pour laquelle vous souhaitez le faire? Si vous dites l'exigence, alors peut-être qu'il pourrait y avoir une autre solution possible ... Pour moi, changer les paramètres utilisateur ne semble pas être une bonne solution ...
Nivas
1
Je suis d'accord. Je ne souhaite pas modifier les paramètres utilisateur. Je souhaite remplacer les paramètres par défaut du navigateur. Et la raison en est que l'alternative est d'utiliser un PDF, ce qui semble inutile lorsque tout le reste peut être rendu imprimable via CSS.
Anthony
Je vois que vous avez vérifié la réponse comme solution, mais cela fonctionne UNIQUEMENT dans Chrome. avez-vous pu obtenir une solution correcte sur plusieurs navigateurs? ou du moins dans quelques navigateurs? parce que j'ai le même problème
mavili
@mavili voir stackoverflow.com/a/23778125/453605 pour une solution multi-navigateurs.
Marcello Nuccio

Réponses:

200

La norme CSS permet un formatage avancé. Il existe une @pagedirective en CSS qui permet une mise en forme qui ne s'applique qu'aux supports paginés (comme le papier). Voir http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

L'inconvénient est que le comportement des différents navigateurs n'est pas cohérent. Safari ne prend toujours pas en charge la configuration de la marge de page de l'imprimante, mais tous les autres principaux navigateurs le prennent désormais en charge.

Avec la @pagedirective, vous pouvez spécifier la marge d'imprimante de la page (qui n'est pas la même que la marge CSS normale d'un élément HTML):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Notez que nous désactivons essentiellement les marges spécifiques à la page ici pour obtenir l'effet de supprimer l'en-tête et le pied de page, de sorte que la marge que nous avons définie sur le corps ne sera pas utilisée dans les sauts de page (comme l'a commenté Konrad ) Cela signifie que cela ne fonctionnera que correctement si le contenu imprimé est une seule page.

Cela ne fonctionne pas dans Firefox 3.6 , IE 7 , Safari 5.1.7 ou Google Chrome 4.1 .

La définition de la marge @page a un effet dans IE 8 , Opera 10 , Google Chrome 21 et Firefox 19 .
Bien que les marges de page soient correctement définies pour votre contenu dans ces navigateurs, le comportement n'est pas idéal pour tenter de résoudre le masquage de l'en-tête / pied de page.

Voici comment il se comporte dans différents navigateurs:

  • Dans Internet Explorer , la marge est en fait définie sur 0 mm dans les paramètres de cette impression, et si vous effectuez un aperçu, vous obtiendrez 0 mm par défaut, mais l'utilisateur peut le modifier dans l'aperçu.
    Vous verrez que le contenu de la page est en fait correctement positionné , mais l'en-tête et le pied de page d'impression du navigateur sont affichés avec un arrière-plan non transparent, masquant ainsi efficacement le contenu de la page à cette position.

  • Dans les versions plus récentes de Firefox , il est positionné correctement, mais le texte de l'en-tête / pied de page et le texte du contenu sont affichés, il ressemble donc à un mauvais mélange de texte d'en-tête de navigateur et de contenu de votre page.

  • Dans Opera , le contenu de la page masque l'en-tête lors de l'utilisation d'un arrière-plan non transparent dans le CSS standard et la position de l'en-tête / pied de page entre en conflit avec le contenu. Assez bien, mais semble étrange si la marge est définie sur une petite valeur qui rend l'en-tête partiellement visible. De plus, la marge de page n'est pas correctement définie.

  • Dans les versions plus récentes de Chrome , l'en-tête et le pied de page du navigateur sont masqués si la marge @page est définie si petite que la position de l'en-tête / pied de page entre en conflit avec le contenu. À mon avis, c'est exactement comment cela devrait se comporter.

Donc, la conclusion est que Chrome a la meilleure implémentation en ce qui concerne le masquage de l'en-tête / pied de page.

admiration
la source
1
Pour clarifier, cela ne semble pas supprimer les en-têtes avec Firefox 21 ou IE10, bien que je soupçonne que cela a empêché l'en-tête / le pied de page de prendre de la place. Cela fonctionne avec Chrome 28.
amh15
2
J'ai mis à jour pour refléter les versions plus récentes du navigateur. Chrome a maintenant la meilleure implémentation de cela.
awe
@SearchForKnowledge: Oui, c'est comme je l'ai dit - si vous lisez ma réponse sous la description de son comportement dans IE: "Vous verrez que le contenu de la page est en fait correctement positionné, mais l'en-tête et le pied de page du navigateur masquent la page contenu à cette position. " Je dis que cela "a un effet" dans IE 8, non pas que cela fonctionne comme nous le voulons ... Je vais modifier ma réponse pour clarifier les choses.
awe
Supprime les en-têtes, mais aussi la marge gauche. Donc tout mon texte est maintenant sur le bord de la page.
Mittchel
7
Cette solution ne fonctionne tout simplement pas du tout , car les @pagemarges et les bodymarges sont des choses fondamentalement différentes: la bodymarge ne s'applique qu'à l' ensemble du corps , c'est-à-dire le haut de la première page et le bas de la dernière page. Pour toutes les pages intermédiaires, le haut / bas aura toujours une marge nulle.
Konrad Rudolph
86

Toute version récente de Chrome et Opera, ainsi que Firefox 48 alpha 1 et supérieur

Vous pouvez définir la marge de la page sur une taille trop petite pour contenir le texte afin de désactiver cela (en empruntant à la réponse de crainte ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>
Développer l'extrait

Pour les versions de Firefox jusqu'à 48 alpha 1

Vous pouvez ajouter un mozNoMarginBoxesattribut à la <html>balise pour empêcher l'impression de l'URL, des numéros de page et d'autres éléments que Firefox ajoute à la marge de page.

Il fonctionne dans Firefox 29 et les versions ultérieures. Vous pouvez voir une capture d'écran de la différence ici , ou voir ici pour un exemple en direct.

Notez que l' mozDisallowSelectionPrintattribut de l'exemple n'est pas nécessaire pour supprimer le texte des marges; voir Que fait l'attribut mozdisallowselectionprint dans PDF.js? .

D'autres navigateurs

Malheureusement, il ne semble y avoir aucun moyen de résoudre ce problème dans Internet Explorer, vous devrez donc recourir au PDF ou demander aux utilisateurs de désactiver les textes de marge.

Il en va de même pour Safari; selon un commentaire de @Luiz Perez , les versions les plus récentes de Safari (8, 9.1 et 10) ne prennent toujours pas en charge la @pagesuppression des textes de marge.

Je ne trouve rien sur Edge et je n'ai pas d'installation de Windows 10 à tester.

user2428118
la source
5
honnêtement, je suis d'accord avec cela. Cela fonctionne même dans Chrome si vous imprimez à l'aide de la "Boîte de dialogue système". assurez-vous simplement que cela <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>est défini. Source:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter
3
Fonctionne très bien sur Firefox. Donc, ainsi que @page{ size: auto; margin: 3mm; } pour prendre en charge Chrome et Safari, a créé une solution multi-navigateurs pour moi.
Clain Dsilva
Cette solution fonctionne très bien pour supprimer les informations / contenus indésirables dans les documents imprimés dans FF. Merci!
Varvara Jones du
C'est génial, mais qu'en est-il d'IE?
Santosh
1
J'ai testé cet extrait sur Safari 8, 9.1 et 10 et il ne supprime pas l'en-tête ou le pied de page dans ces versions de Safari.
Luis Perez
21

Comme @Awe l'avait dit ci-dessus, c'est la solution, qui est confirmée pour fonctionner dans Chrome !!

Assurez-vous simplement que c'est À L'INTÉRIEUR des balises de tête:

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>
Travaux
la source
3
C'est une très bonne solution! Supprime les marges et supprime l'en-tête et le pied de page. Mon seul changement a été d'ajouter ensuite padding: 0.25in 0.5in;dans les styles de carrosserie afin d'avoir les marges exactes dont j'ai besoin pour une impression agréable et propre. Travaillant dans Chrome v25, et heureusement pour ce projet particulier, nous pouvons demander aux utilisateurs finaux de choisir parmi quelques navigateurs modernes.
Charlie Schliesser
2
Malheureusement, cela pose des problèmes avec les impressions de plusieurs pages. Le texte en bas de la page est tronqué.
Jonathan
Fonctionne parfaitement sur Chrome 67.0.3396.99 et Firefox 62.0b5 avec une sortie de page unique.
killscreen
16

J'ai une demande similaire d'un client qui souhaite que l'en-tête, les numéros de page et le pied de page HTML soient supprimés. Dans ce cas, le client présente une page HTML qui peut servir de certificat formel. L'URL, la page et l'en-tête ajoutés ne sont pas pertinents et conduisent à un produit final peu agréable. À certains égards, cela semble bon marché.

Media = Print n'a pas pu désactiver ces paramètres par défaut du navigateur. La seule solution de contournement est de dire à l'utilisateur de cliquer sur le bouton "Gear" et d'activer / désactiver ces éléments. Sérieusement, je ne savais pas que je pourrais faire cela pendant 20 ans (et nous pensons que l'utilisateur typique aura un indice pour cliquer sur le bouton bascule?).

Si CSS prend en charge Media = Print, il doit prendre en charge la capacité de contrôler toute l'expérience d'impression de l'utilisateur final. J'apprécie que les navigateurs fournissent les champs ajoutés, mais pourquoi ne pas permettre à CSS de contrôler l'expérience d'impression globale, si c'est ce que vous souhaitez. Une solution à 90% pourrait être à 100% avec trois autres domaines! Un simple:

#BrowserPrintDefaults{display:none}

suffirait.

Encore une fois, peu importe que l'utilisateur final veuille ou non l'imprimer (peut-être que votre client est très privé et ne veut pas que les URL imprimées flottent. Ou peut-être qu'une équipe de direction utilise des sites de collaboration privés?). Heureux de défendre l'utilisateur final, mais si quelqu'un cherche une réponse, ne répondez pas en disant que c'est le droit de l'utilisateur final d'afficher ou de masquer. Parfois, c'est le droit du client de payer les factures.

CAL
la source
J'ai finalement abandonné, autant que je ne le voulais pas. Je suis tout à fait d'accord que cela devrait être exposé en CSS, car tous les navigateurs ont ces paramètres et c'est un élément de présentation. Mais à la place, il s'agit d'une scène en tant que préférence au niveau de l'application, comme la désactivation des cookies.
Anthony
1
Il s'agit d'une norme CSS officielle utilisant la @Pagedirective pour définir la marge de l'imprimante (qui n'est pas la même que la marge du corps de la page html). Actuellement, cela est pris en charge par tous les principaux navigateurs à l'exception de Safari, mais la façon dont cela affecte l'en-tête / pied de page varie. Les meilleures implémentations sont dans Opera et Chrome.
awe
6

Essayez ce code, fonctionne à 100% pour moi:
POUR Paysage:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

POUR Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>
Oui garçon
la source
1
Les règles de page CSS définiront les marges, mais ne supprimeront pas l'en-tête et le pied de page intégrés placés par le navigateur (URL de la page, numéro de page, etc.)
Anthony
0

Puisque vous avez mentionné "dans leur navigateur" et Firefox, si vous utilisez Internet Explorer, vous pouvez désactiver l'en-tête / pied de page en définissant temporairement la valeur dans le registre, voir ici pour un exemple. AFAIK Je n'ai pas entendu parler d'un moyen de le faire dans d'autres navigateurs. Les réponses de Daniel et de Mickel semblent se heurter, je suppose qu'il pourrait y avoir un paramètre similaire quelque part dans le registre pour que Firefox supprime les en-têtes / pieds de page ou les personnalise. L'avez-vous vérifié?

J'espère que cela aide et Bonnes vacances, Meilleures salutations, Tom.

t0mm13b
la source
1
Dans IE7 +, vous pouvez désactiver l'en-tête / pied de page par un simple clic sur un bouton dans l'aperçu avant impression. Pas besoin de le faire dans le registre!
admiration
0

@page margin: 0mm fonctionne désormais dans Firefox 19.0a2 (07/12/2012).

mince soldat
la source
0

J'ai résolu mon problème en utilisant du CSS dans la page Web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
Kabir Hossain
la source
0

Cela a fonctionné pour moi avec une marge d'environ 1 cm

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
Afshin
la source