Un certain nombre de sites Web que j'utilise ont de très mauvaises feuilles de style pour la presse écrite, mais leurs feuilles de style d'écran sont très bonnes.
Y a-t-il un moyen de dire à mon navigateur d'ignorer la feuille de style d'impression et d'imprimer simplement avec la feuille de style d'écran?
J'aimerais aussi faire cela quand je veux montrer aux clients la différence entre les deux.
Delete This Node
.die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)
simplement ) ouvrir Inspect Element (Outils de développement). ) , allez dans l’ éditeur de styles , utilisez la liste pratique de règles @media sur le côté droit pour rechercher la feuille de style avec lesprint
styles, puis supprimez toutes lesprint
règles appliquéesa[href]
. Relancez ensuite l'aperçu avant impression.Réponses:
L'utilisation de Chrome Developer Tools ( Ctrl+ Shift+ I) est la seule chose qui fonctionne.
media="screen"
et supprimez cet attribut.media="print"
et supprimez tout ce lien.Cela me donne généralement la page avec un style d'écran.
Si vous souhaitez simplement désactiver les styles d'impression, vous pouvez installer l'extension Web Developer (je pense qu'il existe une version pour Firefox et Chrome). Il a un bouton pour désactiver les styles d'impression. Cependant, le style "écran" n'est pas étendu à l'impression. La plupart du temps, cela ne fonctionne pas comme vous le souhaitiez.
la source
Suivant l’ idée de James mais utilisant jQuery:
Si page n'a pas jQuery, injectez-le:
la source
Il existe une nouvelle méthode permettant de choisir directement l'émulation de média dans les outils de développement, voir https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/.
la source
J'ai trouvé un moyen facile de le faire dans Chrome .
Maintenant, essayez d'imprimer. Il choisira l'écran CSS à la place de Print CSS.
la source
Léo avait une bonne idée là-bas, mais il ne fait pas tout à fait ce que James a dit : ça devrait être
Astuce: enregistrez le suivant sous forme de bookmarklet pour une utilisation facile:
Cela précharge jQuery et attend 2 secondes pour la terminer, mais si cette attente ne suffit pas, exécutez-la à nouveau, jQuery aurait dû être chargé entre-temps.
la source
Faites tout ce que James a dit ;)
Vous pouvez vérifier la sortie en ouvrant les paramètres de Chrome Developer Tools (coin inférieur droit) et sélectionner dans "Remplacements" l'option "Émuler l'impression des supports CSS". En basculant cette option, vous pouvez comparer l'impression et l'affichage à l'écran. S'amuser!
Installez cet addon: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk
Maintenant, les images de fond et les couleurs sont également imprimées.
Bug: Ne fonctionne pas avec les sprites CSS.
EDIT: Chrome a changé la vue d'impression en 2014, je pense donc que vous n'avez plus besoin d'utiliser l'addon lié.
la source
Je viens de rencontrer ce problème avec un site Web qui utilisait un seul fichier CSS
@media print
et@media screen
, de sorte que la solution pour désactiver le fichier CSS d'impression séparé ne fonctionnait pas pour moi. Bien que je puisse certainement éditer le code CSS et commenter le bloc d’impression tout en visualisant la page, ces modifications ne sont pas répercutées sur l’aperçu avant impression.La solution que j'ai trouvée était l'extension Print Edit pour Firefox et Chrome . Il vous permet de modifier la page immédiatement avant l’impression et inclut un simple bouton permettant d’utiliser le style Web (
@media screen
) pour la page.J'ai dû modifier légèrement l'échelle d'impression, car la surface d'impression correspond à un rapport d'environ 17:22 et mon navigateur à environ 16: 9, de sorte que certains éléments de la page étaient un peu encombrés horizontalement. Je devais également activer l'impression des couleurs et des images d'arrière-plan séparément
la source
Parfois, les sites Web utilisent CSS pour spécifier que différents styles doivent être utilisés à l'écran et lors de l'impression. C'est souvent bon, mais cela peut aussi être source de confusion et problématique. Inspectez le code source de la page et cherchez quelque chose comme:
Une des raisons pour lesquelles ce problème est fréquent est que les sites Web utilisant le framework Bootstrap très répandu utilisent le fichier bootstrap.min.css , omniprésent , qui contient le style CSS ci-dessus.
La chose clé à rechercher est
@media print
. Les sites Web ont souvent des structures complexes et il peut être utile de sauvegarder la page localement et de l'inspecter à l'aide d'un outil de recherche de texte récursif.Lorsque vous pensez avoir trouvé l'endroit dans le code CSS, vous pouvez modifier la page directement dans votre navigateur à l'aide de ses fonctionnalités pour les développeurs. (Dans Chrome, vous appuyez sur Ctrl+ Shift+ Ipour les lancer.)
Recherchez le code CSS et supprimez ou invalidez simplement les lignes à l'origine du problème. Vérifiez que l'opération a fonctionné en utilisant "Aperçu avant impression".
la source
Installez l'addon Greasemonkey et utilisez le script ci-dessous.
J'ai modifié un script que j'ai trouvé ici http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/
J'ai changé "screen" en "print" à la fin (je n'ai aucune idée de jQuery, alors ne me posez pas de questions), de sorte qu'il envoie la version de l'écran à l'imprimante. Lors de l'impression au format PDF (à l'aide d'imprimantes Foxit ou Nitro Pdf), je règle le type de page sur Tabloid Extra en mode paysage afin que le format PDF corresponde plus ou moins à la taille de l'écran. Prendre plaisir! N'oubliez pas que je ne connais rien à la programmation, le mérite revient donc à l'auteur original.
la source
Essayez d'activer l'
"Print background (colors & images)"
optionPage Setup
et de vérifier son apparencePrint Preview
(c'est pour FF).la source
Semblable à James - utilisez l'onglet "Sources" dans les outils de développement Chrome et remplacez toutes les instances de
media print
parmedia speech
. Ainsi, toutes les modifications css pour masquer les barres de navigation, etc. ne seront pas appliquées lors de l'impression (mais le seront quand la synthèse vocale sera utilisée)Cela peut être faisable avec JQuery comme ci-dessus.
Ceci est utile car j'utilise le CDN de css, donc la personnalisation est juste à l'extérieur
la source
Il existe un excellent outil pour cela sur Mac.
Installer Paparazzi => copier l'URL de Paparazzi => Enregistrer l'image sous => PDF
(Dans les exportations PDF, même le texte est sélectionnable, ce n'est pas simplement une "image")
https://derailer.org/paparazzi/screenshots
prendre plaisir :-)
la source