2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73

Comment obtenir WYSIWYP (imprimer ce que vous voyez) dans un navigateur web ?

Lorsque j'imprime une page web à partir de mon navigateur, je m'attends à obtenir sur papier exactement le contenu que je vois dans le navigateur. Pour être précis : Je m'attends à ce que le navigateur rende le contenu de la même page de la même manière, sauf sur une toile d'une hauteur infinie, puis je décide de la manière dont les résultats seront répartis sur les pages physiques du papier.

Cependant, ce n'est pas du tout ce qui se passe sur de nombreux sites web. Ils peuvent imprimer quelque chose de complètement différent. Je n'ai jamais demandé aux navigateurs de faire cela et je ne veux pas que cela se produise.

Existe-t-il un moyen d'obtenir ce que je veux (autre que de faire des captures d'écran, de les couper et de les coller minutieusement, et d'imprimer les images résultantes) ? Y a-t-il un moyen d'indiquer à un navigateur web que j'utilise (Firefox, Chrome, Safari, IE ou Opera) : “Imprimez cette page comme vous le feriez dans une fenêtre de navigateur arbitrairement haute” ?

(PS : voir aussi : Imprimer à partir d'un navigateur en utilisant le CSS d'écran ?)

Réponses (8)

42
42
42
2017-11-26 06:13:40 +0000

Chrome a intégré cette fonctionnalité dans les outils de développement, mais à un endroit très peu visible.

  • Ouvrez les Outils du développeur (Windows : F12 ou Ctrl+Shift+I, Mac : Cmd+Opt+I)
  • Cliquez sur le bouton du menu hamburger Customize and control DevTools et choisissez More tools > Rendering settings (ou Rendering dans les versions plus récentes).
  • Cochez la case Emulate print media dans l'onglet Rendering et sélectionnez le type de média Screen.

_ Cité principalement dans cette réponse . Voir ci-dessous pour la différence._

Maintenant, lorsque vous imprimerez, l'impression sera exactement ce que vous verrez. Veillez à garder les outils de développement ouverts jusqu'à l'impression. Une fois que vous fermez les outils de développement, le paramètre de rendu sera remis à zéro.

Note : Cette réponse a été inspirée par https://superuser.com/a/568847/176146 . Mais le texte réel de cette réponse est tiré de lmeurs answer . C'est presque exactement la même chose, mais nous essayons de faire exactement le contraire de leur réponse, donc au lieu de régler la dérogation sur Imprimer, elle est réglée sur Ecran.

23
23
23
2014-11-28 12:59:05 +0000

Pourquoi mes pages web n'impriment-elles pas ce que je vois dans mon navigateur ?

La raison pour laquelle certaines de vos pages web s'impriment différemment est qu'elles ont une feuille de style d'impression.


Qu'est-ce qu'une feuille de style d'impression ?

Une feuille de style d'impression permet de formater une page web de manière à ce qu'elle s'imprime automatiquement dans un format convivial. Les feuilles de style pour l'impression existent depuis plusieurs années et ont fait l'objet de nombreux écrits. Pourtant, si peu de sites web les mettent en œuvre, ce qui signifie que nous nous retrouvons avec des pages web qui ne s'impriment pas correctement sur le papier, ce qui est frustrant.

Il est remarquable que si peu de sites web utilisent les feuilles de style pour l'impression comme :

  • Les feuilles de style pour l'impression améliorent énormément la convivialité, en particulier pour les pages ayant beaucoup de contenu (comme celle-ci !)
  • Elles sont incroyablement rapides et faciles à mettre en place

Certains sites web proposent un lien vers une version imprimable de la page, mais cela doit bien sûr être mis en place et maintenu. Il faut également que les utilisateurs remarquent ce lien à l'écran, puis l'utilisent avant d'imprimer régulièrement les pages (par exemple en sélectionnant le bouton d'impression en haut de l'écran). Les versions imprimables sont toutefois utiles lorsqu'il s'agit d'imprimer plusieurs pages web en même temps, par exemple un article qui s'étend sur plusieurs pages web.

Source Désactiver les feuilles de style d'impression (CSS) lors de l'impression d'un site web


Comment désactiver une feuille de style d'impression ?

J'ai récemment eu besoin d'obtenir un instantané d'un site web exactement tel qu'il s'affiche à l'écran. C'est-à-dire que je voulais la couleur de fond, je voulais les publicités, je voulais la mise en page complète.

Une option consiste à prendre des captures d'écran séquentielles en faisant défiler la page, puis à les reconstituer dans Photoshop. Cela prend du temps et vous laisse avec une image à basse résolution (72dpi).

Une autre façon de procéder est d'imprimer la page, puis de l’“enregistrer” en PDF au lieu de l'imprimer. Cela fonctionne assez bien pour les pages qui ne définissent pas une mise en page différente pour l'impression d'une page par rapport à la visualisation de la page.

Malheureusement pour moi, il est devenu de plus en plus populaire d'inclure une feuille de style “d'impression” sur un site web, qui définit de nouveaux styles de page lorsqu'un utilisateur essaie d'imprimer le site. Elle est définie dans l'en-tête et ressemble à ceci :

Je n'ai trouvé qu'une seule option qui réponde vraiment à mes besoins : L'extension “Web Developer” add-on / extension développée par Chris Pederick.

Avec ce plugin, vous pouvez très facilement désactiver TOUS les styles, les styles par défaut, les styles en ligne, les styles intégrés et, vous l'avez deviné, les styles d'impression !

Il est actuellement disponible pour Firefox et Chrome. J'espère vraiment qu'une extension Safari viendra un jour, car j'utilise principalement Safari. La seule option que j'ai trouvée pour Safari est de désactiver TOUS les styles - une fonction qui est fournie par défaut avec la dernière version (5.0.3) du navigateur. Cette fonction est utile pendant le développement pour voir comment votre site sera affiché sur un navigateur en mode texte uniquement, mais sans la possibilité de sélectionner les styles que vous désactivez, elle a une utilité limitée.

Voici un exemple de désactivation des styles d'impression avec l'extension ci-dessus dans Firefox :

Source Feuille de style d'impression - le guide définitif

9
9
9
2017-05-09 13:01:26 +0000

Une solution sans plug-in pour Firefox : Ouvrez Web Developer Tools, dans Default Developer Tools (icône d'engrenage) cochez “Take a screenshot of the entire page”. Vous ne devez faire cette partie qu'une seule fois.

Puis dans Developer Tools, cliquez sur l'icône de la caméra. La page entière sera enregistrée en format .png. A partir de là, vous pouvez l'imprimer, la convertir en pdf, etc.

8
8
8
2014-12-02 07:29:40 +0000

J'utilise l'extension Chrome : Capture d'écran de la page Web . En deux clics, la page web complète est convertie en jpg ou pdf. Plus besoin de coller les captures d'écran vous-même. Cette page ressemble à ceci :

3
3
3
2016-10-12 11:47:35 +0000

J'étais également confronté à un problème similaire. Actuellement, j'utilise Print Friendly and PDF Extenstion for Chrome .

La meilleure fonctionnalité est que je peux supprimer manuellement les éléments que je ne veux pas dans mon Print/PDF.

1
1
1
2016-10-27 18:42:56 +0000

(Au risque de transformer cela en un ensemble de Recommandations sur les logiciels réponses, mais jusqu'à présent, installer et utiliser l'extension de navigateur X semble être le seul type de réponse qui fonctionne réellement :)

Dernièrement, j'ai utilisé l'extension Open Screenshot Chrome à cette fin, et j'en suis très satisfait. Elle n'a eu aucun problème avec une longue page Quora .

_Mise à jour (novembre 2017) : ce n'est plus la meilleure option : Firefox et Chrome prennent désormais en charge la prise de copies d'écran pleine page dans leurs Outils de développement _.

1
1
1
2019-03-14 12:26:08 +0000

Aujourd'hui, cela peut être fait dans Firefox (j'utilise 65.0.2 en ce moment) de la manière suivante :

  1. Appuyez sur F12. Le volet Outils du développeur s'affichera.
  2. Près du coin supérieur droit, il y a une icône de caméra. Pour prendre une capture d'écran de la page entière, cliquez dessus.

Dans Settings (pour y accéder, cliquez sur les trois points à droite de l'icône de la caméra), vous pouvez légèrement personnaliser son comportement ; par défaut, la capture d'écran sera enregistrée dans votre dossier de téléchargements Firefox.

Si l'icône de la caméra est manquante, vous devez d'abord l'activer dans Settings.

1
1
1
2017-06-22 16:06:45 +0000

En voici une autre qui s'appelle OpenScreenShoot . Je l'adore parce qu'il est Open source, disponible sur GitHub, et qu'il a fonctionné pour moi pendant une très longue page web sur laquelle d'autres alternatives comme WebpageScreenShoot ont échoué.