web-dev-qa-db-fra.com

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

J'ai vu cette question se poser de différentes manières sur SO et plusieurs autres sites Web, mais la plupart d'entre eux sont trop spécifiques ou obsolètes. J'espère que quelqu'un pourra apporter une réponse définitive ici sans se livrer à des spéculations.

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

Notez s'il vous plaît:

Si certains navigateurs proposent ceci et d'autres non (ou si vous savez seulement comment le faire pour certains navigateurs), j'apprécie les solutions spécifiques aux navigateurs.

De la même manière, si vous connaissez un navigateur classique qui applique des restrictions spécifiques à cette opération, cela est également utile, mais une documentation assez récente serait la bienvenue. (Dire simplement que "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 à cette politique au cours des trois dernières années).

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

Je suis très conscient que CSS offre la possibilité de changer l’orientation de la page ainsi que les marges de la page. Une des nombreuses difficultés est avec Firefox. Si je règle les marges de la page sur 1 pouce, il ajoute ceci au demi-pouce qu’il met déjà en place.

Je souhaite ardemment 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é) constituent leur principale préoccupation.

javascripthtmlcssbrowserprinting
166
Anthony

Le standard CSS permet une mise en forme avancée. Il existe une directive @page dans CSS qui permet une mise en forme qui s'applique uniquement 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 de 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 la prennent désormais en charge.

Avec la directive @page, vous pouvez spécifier la marge de l’imprimante de la page (ce qui est différent de 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 ici les marges spécifiques aux pages pour obtenir l’effet de supprimer l’en-tête et le pied de page. Ainsi, les marges que nous avons définies sur le corps ne seront pas utilisées dans les sauts de page (comme commenté par Konrad ). Cela signifie que cela ne fonctionnera correctement que si le contenu imprimé ne compte qu'une 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 la page soient correctement définies pour votre contenu dans ces navigateurs, le comportement n'est pas idéal lorsque vous essayez de résoudre le problème de masquage de l'en-tête/du pied de page. 

Voici comment cela se comporte dans différents navigateurs:

  • Dans Internet Explorer, la marge est définie sur 0 mm dans les paramètres de cette impression. Si vous effectuez Aperçu, vous obtiendrez 0 mm par défaut, mais l'utilisateur peut la modifier dans l'aperçu.
    Vous verrez que le contenu de la page est bien positionné correctement, 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 le contenu de la page à cet emplacement. 

  • Dans Firefox les versions plus récentes, il s'agit de positionné correctement, mais le texte de l'en-tête/du pied de page et le texte du contenu sont affichés.

  • Dans Opera, le contenu de la page masque l'en-tête lorsque vous utilisez un arrière-plan non transparent dans le css standard et que la position de l'en-tête/du pied de page est en conflit avec le contenu. Assez bien, mais semble étrange si margin est défini sur une petite valeur rendant l'en-tête partiellement visible. De plus, la marge de la page n'est pas définie correctement.

  • Dans Chrome versions plus récentes, 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/du pied de page entre en conflit avec le contenu. À mon avis, c'est exactement ce que cela devrait se comporter.

La conclusion est donc que Chrome possède la meilleure implémentation en ce qui concerne le masquage de l'en-tête/du pied de page. 

181
awe

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

Vous pouvez définir la marge de la page sur une taille trop petite pour contenir le texte afin de la désactiver (emprunt de la réponse de awe ):

@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>

Pour les versions de Firefox jusqu'à 48 alpha 1

Vous pouvez ajouter un attribut mozNoMarginBoxes à la balise <html> pour empêcher l’impression de l’URL, des numéros de page et d’autres éléments ajoutés par Firefox à la marge de la page.

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

Notez que l'attribut mozDisallowSelectionPrint dans l'exemple est not requis pour supprimer le texte des marges; voir À quoi sert l'attribut mozdisallowselectionprint dans PDF.js?.

D'autres navigateurs

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

La même chose vaut 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 @page pour la suppression des textes de marge.

Je ne trouve rien dans Edge et je ne dispose pas d'une installation Windows 10 à tester.

85
user2428118

Comme @Awe l’a dit plus haut, c’est la solution qui fonctionne avec Chrome !!

Assurez-vous simplement que cela se trouve DANS les balises head:

<head>
<style type="text/css" 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>
20
Works

J'ai une demande similaire d'un client qui veut 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 pouvant servir de certificat officiel. L'URL, la page et l'en-tête ajoutés ne sont pas pertinents et conduisent à un produit final peu plaisant. À certains égards, cela semble simplement bon marché. 

Média = Imprimer n'a pas pu désactiver ces paramètres par défaut du navigateur. La seule solution consiste à indiquer à l'utilisateur de cliquer sur le bouton "Engrenage" 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 type aura un indice pour cliquer sur le bouton bascule?).

Si CSS prend en charge Media = Print, il devrait permettre 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 champs supplémentaires! Un simple: 

#BrowserPrintDefaults{display:none}

suffirait. 

Encore une fois, peu importe que l'utilisateur final veuille ou non imprimer le document (votre client est peut-être très privé et ne veut pas d'URL imprimées. Ou peut-être une équipe de direction utilise-t-elle des sites de collaboration privés?). Content 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 de montrer ou de cacher. Parfois, c'est le droit du client de payer les factures.

16
CAL

Il n'y a aucun moyen de modifier les paramètres de l'imprimante, les marges ou tout autre paramètre du navigateur, de manière temporaire ou permanente, à partir de CSS ou de JavaScript.

Bien que cela soit regrettable pour votre besoin réel, ces restrictions sont la raison pour laquelle plus de 95% des utilisateurs Web conservent JavaScript dans leur navigateur. ( Statistiques du navigateur )

6
Daniel Vassallo

Essayez ce code, ça marche à 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>
5
Iyes boy

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

J'espère que cela vous aide et Bonnes vacances, Cordialement, Tom.

0
t0mm13b

Cela a fonctionné pour moi avec environ 1 cm de marge 

@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 */
}
0
afshin

@page margin: 0mm fonctionne maintenant dans Firefox 19.0a2 (2012-12-07).

0
thinsoldier

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

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