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 affiché dans le navigateur. Pour être précis: le navigateur doit restituer le même contenu de page de la même manière, sauf sur un canevas de hauteur infinie, puis décider de manière spécifique à l’impression de la répartition des résultats sur des pages physiques.

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 le faire et je ne veux pas que cela se produise.

Existe-t-il un moyen d'obtenir ce que je veux (autre que de prendre des captures d'écran, de les couper et les coller minutieusement ensemble et d'imprimer les images résultantes)? Existe-t-il un moyen de dire à un navigateur Web que j'utilise (Firefox, Chrome, Safari, IE ou Opera): "imprimez cette page comme vous le feriez sur une fenêtre de navigateur d'une hauteur arbitraire"?

(PS: voir aussi: Imprimer du navigateur à l'aide de Screen CSS ?)

Cette fonctionnalité est intégrée aux outils de développement de Google Chrome, mais à un endroit très peu évident.

• Ouvrez les outils de développement (Windows: F12ou Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I).
• Cliquez sur le bouton de menu Personnaliser et contrôler DevTools hamburger, puis choisissez Plus d'outils> Paramètres de rendu (ou Rendu dans les versions les plus récentes).
• Cochez la case Emuler le support d'impression dans l' onglet Rendu et sélectionnez le type de support d' écran .

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

Maintenant, lorsque vous imprimez, l’impression sera exactement ce que vous voyez. Assurez-vous de garder les outils de développement ouverts jusqu'à ce que vous imprimiez. Une fois que vous avez fermé les outils de développement, les paramètres de rendu sont réinitialisés.

Remarque: l'inspiration pour cette réponse provient de https://superuser.com/a/568847/176146 . Mais le texte même de cette réponse provient de la réponse d' Imeurs . C'est presque exactement la même chose, mais nous essayons de faire exactement le contraire de leur réponse. Ainsi, au lieu de définir le remplacement sur Imprimer, il est défini sur Écran .

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 .

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

Une feuille de style d'impression formate une page Web. Ainsi, une fois imprimée, elle est automatiquement imprimée dans un format convivial. Les feuilles de style d’impression existent depuis un certain nombre d’années et ont fait l’objet de nombreux écrits. Pourtant, si peu de sites Web les implémentent, nous nous retrouvons avec des pages Web qui, de manière frustrante, ne s’impriment pas correctement sur papier.

Il est remarquable que si peu de sites Web utilisent des feuilles de style d'impression comme:

• Les feuilles de style d'impression améliorent énormément la convivialité, en particulier pour les pages contenant beaucoup de contenu (comme celui-ci!)
• Ils sont incroyablement rapides et faciles à installer

Certains sites Web proposent un lien vers une version imprimable de la page, mais ceci doit bien sûr être configuré et maintenu. Il faut également que les utilisateurs remarquent ce lien à l'écran, puis l'utilisent avant la manière habituelle d'imprimer les pages (par exemple, en sélectionnant le bouton Imprimer en haut de l'écran). Les versions imprimables sont toutefois utiles lorsque vous imprimez plusieurs pages Web en même temps, par exemple un article couvrant plusieurs pages Web.

Source Désactiver les feuilles de style d'impression CSS (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 apparaît sur mon écran. C'est-à-dire que je voulais la couleur de fond, les annonces, la mise en page complète.

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

Une autre façon de procéder consiste à imprimer la page, puis à "enregistrer en tant que" PDF au lieu de l’imprimer. Cela fonctionne assez bien pour les pages qui ne définissent pas une disposition différente pour l'impression d'une page par rapport à l'affichage de la page.

Malheureusement pour moi, il est devenu de plus en plus populaire d'inclure une feuille de style "print" sur un site Web, qui définit de nouveaux styles de page lorsqu'un utilisateur essaie d'imprimer le site. Ceci est défini dans l'en-tête et ressemble à ceci:

J'ai trouvé une seule option qui réponde vraiment à mes besoins: l' extension / l'extension "Web Developer" développée par Chris Pederick.

Avec ce plugin, vous pouvez très facilement désactiver TOUS les styles, styles par défaut, styles en ligne, 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 fonctionnalité fournie par défaut avec la dernière version (5.0.3) du navigateur. Cela 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, son utilité est limitée.

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

Feuille de style source - le guide de référence

Une solution sans plug-in pour Firefox: Ouvrez Outils de développement Web, dans Outils de développement par défaut (icône représentant une roue dentée), cochez la case "Prendre une capture d'écran de la page entière". Vous devez seulement faire cette partie une fois.

Ensuite, dans les outils de développement, cliquez sur l'icône de l'appareil photo. La page entière sera enregistrée au format .png. De là, vous pouvez l’imprimer, la convertir en PDF, etc.

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 en pdf. Plus besoin de coller vous-même les captures d'écran. Cette page ressemble à ceci:

Je faisais également face au même problème. J'utilise actuellement Print Friendly et PDF Extenstion pour Chrome .

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

En voici un autre appelé OpenScreenShoot . J'adore ça parce que c'est du code source ouvert, disponible sur GitHub, et que cela a fonctionné pour moi pour une très longue page Web sur laquelle d'autres alternatives telles que WebpageScreenShot ont échoué.

(Au risque de transformer cela en un ensemble de réponses aux recommandations du logiciel , 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'utilise l' extension Open Screenshot Chrome à cette fin et j'en suis très heureux. Il n'y avait pas de problèmes avec une longue page de Quora .

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

Aujourd'hui, cela peut être fait dans Firefox (j'utilise actuellement 65.0.2) comme suit:

1. Appuyez sur F12. Le volet Outils de développement apparaîtra.
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 Paramètres (pour y accéder, cliquez sur les trois points à droite de l'icône de l'appareil photo), vous pouvez légèrement personnaliser son comportement. Par défaut, la capture d'écran sera sauvegardé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 les paramètres .