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

j'ai vu cette question posée de plusieurs façons sur SO et plusieurs autres sites Web, mais la plupart d'entre eux sont soit trop spécifiques ou périmés. J'espère que quelqu'un peut 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 "imprime à partir de leur navigateur" je veux dire une certaine forme de HTML, PAS de PDF ou un autre genre de mime débranché.

s'il vous Plaît note:

si certains navigateurs offrent ceci et d'autres non (ou si vous ne savez comment le faire que pour certains navigateurs), je me réjouis des solutions spécifiques au navigateur.

de la même façon, si vous connaissez un navigateur grand public qui a des restrictions spécifiques contre le fait de faire cela, c'est également utile, mais certains documents assez à jour serait apprécié. (en disant simplement "cela va à L'encontre des politique sur la sécurité" 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 me réfère spécifiquement aux marges d'impression, 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 luttes est avec Firefox. Si j'ai mis le marges de page à 1 pouce, il ajoute cela au demi pouce qu'il met déjà en place.

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

163
demandé sur Anthony 2009-12-25 13:33:32

9 réponses

la norme CSS permet un formatage avancé. Il y a une directive @page dans CSS qui permet certains formatage qui s'applique seulement aux supports de pagination (comme le papier). Voir http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Inconvénient est que le comportement dans les différents navigateurs n'est pas cohérente. Safari ne prend toujours pas en charge le réglage de la marge de page de l'imprimante, mais tous les autres navigateurs importants le prennent en charge.

avec la directive @page , vous pouvez spécifier la marge de l'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 fondamentalement 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 mettons sur le corps ne sera pas utilisé dans les sauts de page (comme commenté par Konrad ) cela signifie qu'il ne fonctionnera correctement si le contenu imprimé n'est qu'une page.

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

définir la marge @page a effet dans IE 8 , Opera 10 , Google Chrome 21 et Firefox 19 .

Bien que les marges de page soient réglées correctement pour votre contenu dans ces navigateurs, le comportement n'est pas idéal pour essayer de résoudre la dissimulation de l'en-tête/pied de page.

C'est comment il se comporte dans les différents navigateurs:

  • In Internet Explorer , la marge est en fait fixée à 0mm dans les paramètres de cette impression, et si vous prévisualisez vous obtiendrez 0mm par défaut, mais le l'utilisateur peut le modifier dans la fenêtre d'aperçu.

    Vous verrez que le contenu de la page est en fait positionné correctement, mais l'en-tête et le pied de page d'impression du navigateur est affiché avec un fond non transparent, et donc cacher efficacement le contenu de la page à cette position.

  • dans Firefox nouvelles versions, il est positionné correctement, mais à la fois l'en-tête/pied de page texte et contenu le texte est affiché, 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 Cache l'en-tête lorsqu'il utilise un fond non transparent dans le css standard et la position de l'en-tête/pied de page est en conflit avec le contenu. Assez bon, mais semble étrange si la marge est définie à une valeur faible qui provoque l'en-tête pour être partiellement visibles. Aussi la marge de 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 caché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 la façon de se comporter.

donc la conclusion est que Chrome a la meilleure mise en œuvre de ce en ce qui concerne la dissimulation de l'en-tête/pied de page.

172
répondu awe 2017-05-23 12:10:44

toute version récente de Chrome et Opera, ainsi que Firefox 48 alpha 1 et plus

vous pouvez définir la marge de page à une taille qui est trop petite pour contenir le texte afin de désactiver ce (empruntant de awe 'S réponse):

@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

You peut ajouter un attribut mozNoMarginBoxes à la balise <html> pour empêcher L'URL, les numéros de page et D'autres choses que Firefox ajoute à la marge de la page d'être imprimé.

il fonctionne à partir de Firefox 29. , Vous pouvez voir une capture d'écran de la différence ici , ou voir ici pour un exemple vivant.

notez que l'attribut mozDisallowSelectionPrint dans l'exemple est Non requis pour supprimer le texte des marges; voir What does the mozdisallowselectionprint attribut in PDF.js? .

autres navigateurs

malheureusement, il semble y avoir un moyen connu pour résoudre ce problème dans Internet Explorer, donc vous devrez recourir à PDF ou demander aux utilisateurs de désactiver les textes de marge.

il en va de même pour le Safari; selon un commentaire de @Luiz Perez , les versions les plus récentes de Safari (8, 9.1 et 10) ne supportent toujours pas @page pour supprimer les textes de marge.

Je ne trouve rien sur Edge et je n'ai pas D'installation Windows 10 Disponible pour tester.

84
répondu user2428118 2017-01-20 09:51:42

comme @Awe l'avait dit plus haut, c'est la solution, qui est confirmée à travailler dans Chrome!!

assurez-vous juste que c'est dans l'en-tête tags:

<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
répondu Works 2014-05-01 12:47:23

Anthony,

il est regrettable que tant de gens n'aient pas compris votre question. J'ai une requête 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 qui peut être doublée en tant que certificat officiel. L'URL, la page et l'en-tête ajoutés sont peu pertinents et conduisent à un produit final moins qu'agréable. À certains égards, il semble tout à fait bon marché.

Media=a Imprimer pas été en mesure de désactiver ces navigateur par défaut. La seule solution consiste à 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 pouvais faire cela pendant 20 ans (et nous pensons que l'utilisateur typique aura un indice pour cliquer le bouton à bascule?).

si CSS supporte Media=Print, il devrait supporter la capacité de contrôler toute l'expérience d'impression de l'utilisateur final. Je comprends que les navigateurs fournissent les champs supplémentaires, mais, pourquoi ne pas permettre CSS à contrôlez l'expérience d'impression globale-si c'est ce que vous souhaitez. Une solution à 90% pourrait être 100% avec trois champs de plus! Un simple:

#BrowserPrintDefaults{display:none} 

suffirait.

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

So....sans pirater le registre ou forcer l'utilisateur à basculer les paramètres dans la prévisualisation de l'impression, quelqu'un a-t-il trouvé une réponse?

17
répondu CAL 2011-07-07 18:10:29

il est impossible de modifier les paramètres de l'imprimante, les marges ou tout autre paramètre du navigateur, temporairement ou de façon permanente, à partir de CSS ou de JavaScript.

bien que cela soit regrettable pour votre véritable exigence, ces restrictions sont la raison pour laquelle 95%+ des utilisateurs web garder JavaScript activé dans leurs navigateurs. ( Statistiques Navigateur )

7
répondu Daniel Vassallo 2010-01-09 18:59:08

essayez ce code, fonctionne à 100% pour moi:

pour Paysage:

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

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

</style>
</head>

POUR Portrait:

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

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

</style>
</head>
5
répondu Iyes boy 2016-07-14 12:23:02

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'une façon de le faire dans d'autres navigateurs. Les réponses de Daniel et Mickel semblent se heurter, je suppose qu'il pourrait y avoir un arrangement similaire quelque part dans le Registre pour firefox pour enlever les en-têtes/pieds de page ou de les personnaliser. Avez-vous vérifié?

Espérons que cela aide et Joyeuses fêtes, Meilleures salutations, Tom.

0
répondu t0mm13b 2009-12-25 12:32:03

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

0
répondu thinsoldier 2012-12-11 16:50:36

j'ai résolu mon problème en utilisant quelques css dans la page web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
0
répondu Kabir Hossain 2018-08-27 06:14:28