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 en utilisant Screen CSS ?)
Cette fonctionnalité est intégrée aux outils de développement de Google Chrome, mais à un emplacement très peu évident.
- Ouvrez les outils de développement (Windows: F12 ou Ctrl+Shift+I, Mac: Cmd+Opt+I)
- Cliquez sur le bouton de menu Personnaliser et contrôler DevTools hamburger et choisissez Autres outils> Paramètres de rendu (ou Rendu dans les versions les plus récentes).
- Cochez la case Émuler le support d'impression dans l'onglet Rendu et sélectionnez l'onglet Écran type de média.
Cité principalement de ceci 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 de cette réponse provient de lmeurs ' answer . 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 impriment différemment est qu’elles ont une feuille de style print .
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) 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 méthode consiste à imprimer la page, puis à "enregistrer sous" un 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 réellement à mes besoins: Le module complémentaire/"Développeur Web" développé 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:
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: 
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.
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 Recommandations concernant 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’utilise l’extension Open Screenshot Chrome à cet effet, et j’en suis très heureux. Il n’ya eu aucun problème 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 leur Outils de développement .