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

Question

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

Demandé el 25 de Décembre, 2009: Quand la question a-t-elle été
69447 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Existe-t-il un moyen, par le biais de CSS ou de javascript, de modifier les paramètres d'impression par défaut lorsque quelqu'un imprime dans son navigateur ? Et bien sûr, par "imprimer à partir de son navigateur", j'entends une forme de HTML, pas un PDF ou un autre type de fichier multimédia dépendant d'un plug-in.

Veuillez noter :

Si certains navigateurs offrent cette possibilité et d'autres pas (ou si vous ne savez comment le faire que pour certains navigateurs), je me réjouis des solutions spécifiques à chaque navigateur.

De même, si vous connaissez un navigateur grand public qui a des restrictions spécifiques pour ne JAMAIS faire cela, c'est également utile, mais une documentation assez à jour serait appréciée. (dire simplement "cela va à l'encontre de la politique de sécurité de XYZ" n'est pas très convaincant lorsque XYZ a apporté des changements significatifs à ladite 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 dire pour toujours, juste pour ma page, et je fais spécifiquement référence aux marges d'impression, aux en-têtes et aux pieds de page.

Je sais très bien que les CSS offrent la possibilité de modifier l'orientation de la page ainsi que les marges de la page. L'un des nombreux problèmes que je rencontre est celui de Firefox. Si je fixe les marges de la page à 1 pouce, il AJOUTE cette valeur au demi-pouce qu'il met déjà en place.

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

Demandé el 25 de Décembre, 2009 par Anthony

0 votes

Y a-t-il une raison spécifique pour laquelle vous voulez le faire ? Si vous répondez par l'affirmative, alors il pourrait y avoir une autre façon de faire. possible solution... Pour moi, modifier les paramètres de l'utilisateur n'est pas une bonne solution...

Commenté el 25 de Décembre, 2009 par Nivas

2 votes

Je suis d'accord. Je ne veux pas changer les paramètres de l'utilisateur. Je veux écraser 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 quand tout le reste peut être rendu imprimable via CSS.

Commenté el 7 de Juillet, 2011 par Anthony

0 votes

Je vois que vous avez coché la réponse comme étant la solution, mais elle ne fonctionne QUE dans chrome. Avez-vous pu obtenir une solution correcte pour tous les navigateurs ? ou au moins pour quelques navigateurs ? car j'ai le même problème.

Commenté el 3 de Avril, 2014 par mavili

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

201voto

awe Points 9697

La norme CSS permet un formatage avancé. Il existe un @page en CSS qui permet un certain formatage 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 dans les différents navigateurs n'est pas cohérent. Safari ne prend toujours pas en charge la définition de la marge de la page de l'imprimante, mais tous les autres navigateurs majeurs le font désormais.

Avec le @page vous pouvez spécifier la marge d'impression 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 ici les marges spécifiques à la page pour obtenir l'effet de la suppression de l'en-tête et du 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'indique l'option commenté par Konrad ) Cela signifie qu'il ne fonctionnera correctement que si le contenu imprimé ne comporte qu'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 la page soient correctement définies pour votre contenu dans ces navigateurs, le comportement n'est pas idéal pour tenter de résoudre le problème du masquage de l'en-tête/pied de page.

Voici comment il se comporte dans les différents navigateurs :

Sur Internet Explorer La marge est en fait fixée à 0 mm dans les paramètres de cette impression, et si vous faites un 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 en fait positionné sur correctement, mais l'en-tête et le pied de page du navigateur sont affichés avec un arrière-plan non transparent, ce qui a pour effet de masquer le contenu de la page à cet endroit.
Sur Firefox versions plus récentes, il est positionné sur correctement, mais le texte de l'en-tête/pied de page et le texte du contenu sont tous deux affichés, ce qui donne l'impression d'un mauvais mélange entre le texte de l'en-tête du navigateur et le contenu de votre page.
Sur Opéra le contenu de la page masque l'en-tête lorsqu'on utilise un arrière-plan non transparent dans la css standard et la position de l'en-tête/pied de page est en conflit avec le contenu. C'est très bien, mais cela semble étrange si la marge est fixée à une petite valeur, ce qui rend l'en-tête partiellement visible. De même, la marge de la page n'est pas définie correctement.
Sur Chrome Dans les versions plus récentes, l'en-tête et le pied de page du navigateur sont masqués si la marge @page est si petite que la position de l'en-tête/pied de page entre en conflit avec le contenu. À mon avis, c'est exactement comme cela que cela devrait se passer.

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

Répondu el 6 de Mai, 2010 par awe (9697 Points )

1 votes

Pour clarifier, cela ne semble pas supprimer les en-têtes avec Firefox 21 ou IE10, même si je soupçonne que cela a permis à l'en-tête/pied de page de ne pas prendre de place. Cela fonctionne avec Chrome 28.

Commenté el 30 de Juillet, 2013 par amh15

2 votes

J'ai fait une mise à jour pour refléter les nouvelles versions des navigateurs. Chrome a maintenant la meilleure implémentation de ceci.

Commenté el 31 de Juillet, 2013 par awe

0 votes

@SearchForKnowledge : Oui, c'est comme je l'ai dit - si vous lisez ma réponse sous la description du comportement dans IE : "Vous verrez que le contenu de la page est en fait positionné correctement, mais l'en-tête et le pied de page imprimés par le navigateur cachent le contenu de la page à cette position." Je dis que cela "a de l'effet" dans IE 8, pas que cela fonctionne comme nous le voulons... Je vais modifier ma réponse pour que ce soit plus clair.

Commenté el 7 de Août, 2014 par awe

Afficher 11 autres commentaires

Answer 3

86voto

user2428118 Points 3408

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

Vous pouvez définir la marge de la page à une taille qui est trop petite pour contenir le texte afin de désactiver cela (en empruntant à crainte Réponse de l'UE) :

@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 mozNoMarginBoxes de l'attribut <html> pour empêcher l'impression de l'URL, des numéros de page et des autres éléments que Firefox ajoute à la marge de la page.

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

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

Autres navigateurs

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

Il en va de même pour Safari ; d'après un commentaire de @Luiz Perez En effet, les versions les plus récentes de Safari (8, 9.1 et 10) ne prennent toujours pas en charge l'application @page pour la suppression des textes de marge.

Je n'ai rien trouvé sur Edge et je n'ai pas d'installation de Windows 10 à disposition pour tester.

Répondu el 21 de Mai, 2014 par user2428118 (3408 Points )

5 votes

Honnêtement, je suis d'accord avec ça. Cela fonctionne même dans Chrome si vous imprimez en utilisant "System dialog". Assurez-vous simplement que <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint> est fixé. Source : https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714‌383

Commenté el 5 de Novembre, 2014 par Peter

3 votes

Fonctionne très bien sur Firefox . Donc, ceci ainsi que @page{ size: auto; margin: 3mm; } pour supporter chrome et safari a fait une solution multi-navigateur pour moi.

Commenté el 7 de Mai, 2015 par Clain Dsilva

0 votes

Cette solution fonctionne très bien pour supprimer les informations/contenus indésirables des documents imprimés dans FF. Merci !

Commenté el 11 de Juin, 2015 par Varvara Jones

Afficher 3 autres commentaires

Answer 4

22voto

Works Points 101

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

Veillez simplement à ce qu'il soit à l'intérieur des balises d'en-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>

Répondu el 28 de Mars, 2012 par Works (101 Points )

3 votes

C'est une très bonne solution ! Elle supprime les marges et supprime l'en-tête et le pied de page. Ma seule modification a été d'ajouter ensuite padding: 0.25in 0.5in; dans les styles de corps afin d'avoir les marges exactes dont j'ai besoin pour une impression propre et agréable. Je travaille dans Chrome v25, et heureusement pour ce projet particulier, nous pouvons demander aux utilisateurs finaux de choisir parmi deux navigateurs modernes.

Commenté el 25 de Février, 2013 par Charlie S

2 votes

Malheureusement, cela pose des problèmes pour les impressions de plusieurs pages. Le texte en bas de la page est coupé.

Commenté el 8 de Février, 2016 par jonathanconway

0 votes

Fonctionne parfaitement sur Chrome 67.0.3396.99 et Firefox 62.0b5 avec une seule page.

Commenté el 11 de Juillet, 2018 par killscreenmike

Answer 5

16voto

CAL Points 81

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 faire office de certificat officiel. L'ajout de l'URL, de la page et de l'en-tête n'est pas pertinent et donne un produit final moins agréable. D'une certaine manière, cela semble tout simplement bon marché.

Media=Print n'a pas été en mesure de désactiver ces paramètres par défaut du navigateur. La seule solution consiste à demander à l'utilisateur de cliquer sur le bouton "Gear" et d'activer ou de désactiver ces éléments. Sérieusement, cela fait 20 ans que je ne savais pas que je pouvais faire cela (et nous pensons que l'utilisateur type aura la moindre idée de cliquer sur le bouton de basculement ?)

Si le CSS prend en charge Media=Print, il doit permettre de contrôler l'ensemble de l'expérience d'impression de l'utilisateur final. J'apprécie que les navigateurs fournissent les champs supplémentaires, mais pourquoi ne pas permettre à CSS de contrôler l'ensemble de l'impression, si c'est ce que l'on souhaite. Une solution à 90% pourrait être à 100% avec trois champs supplémentaires ! Un simple :

#BrowserPrintDefaults{display:none}

suffirait.

Encore une fois, la question n'est pas de savoir si l'utilisateur final veut l'imprimer ou non (votre client est peut-être très privé et ne veut pas que des URL imprimées circulent. Ou peut-être qu'une équipe de direction utilise un site de collaboration privé). Je suis 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 de montrer ou de cacher. Parfois, c'est le droit du client qui paie les factures.

Répondu el 7 de Juillet, 2011 par CAL (81 Points )

0 votes

J'ai fini par abandonner, même si je n'en avais pas envie. Je suis tout à fait d'accord pour dire que cela devrait être exposé dans les CSS, puisque tous les navigateurs ont ces paramètres et que c'est un élément de présentation. Mais au lieu de cela, il s'agit d'une préférence au niveau de l'application, comme la désactivation des cookies.

Commenté el 7 de Juillet, 2011 par Anthony

1 votes

Il s'agit d'une norme CSS officielle qui utilise le @Page 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, cette directive est prise en charge par tous les principaux navigateurs, à l'exception de Safari, mais la manière dont elle affecte l'en-tête et le pied de page varie. Les meilleures implémentations se trouvent dans Opera et Chrome.

Commenté el 31 de Juillet, 2013 par awe

Answer 6

6voto

Daniel Vassallo Points 142049

Il n'existe 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 vos besoins réels, ces restrictions sont la raison pour laquelle plus de 95 % des utilisateurs du Web gardent JavaScript activé dans leurs navigateurs. ( Statistiques des navigateurs )

Répondu el 25 de Décembre, 2009 par Daniel Vassallo (142049 Points )

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

Réponses

Voici comment il se comporte dans les différents navigateurs :

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

Pour les versions de Firefox jusqu'à 48 alpha 1

Autres navigateurs

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Voici comment il se comporte dans les différents navigateurs :

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

Pour les versions de Firefox jusqu'à 48 alpha 1

Autres navigateurs

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: