Comment imprimer avec la feuille de style d'écran?

50

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.

vy32
la source
Si les sites Web en question appartiennent à des tiers, vous pouvez peut-être essayer les outils de développement de Chrome (Ctrl + Maj + I), puis cliquer avec le bouton droit de la souris sur le nœud / l'élément (la feuille de style d'impression dans ce cas) et sélectionner Delete This Node.
DavChana
C'est un doublon!
vy32
Pas une réponse directe à votre question, mais si sur Firefox, vous êtes simplement ennuyé que tous les liens soient attachés avec leurs URL complètes sur l'aperçu avant impression (celui qui a pensé que c'était une bonne idée doitdie (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 les printstyles, puis supprimez toutes les printrègles appliquées a[href]. Relancez ensuite l'aperçu avant impression.
ADTC

Réponses:

24

L'utilisation de Chrome Developer Tools ( Ctrl+ Shift+ I) est la seule chose qui fonctionne.

  1. Recherchez toutes les instances de media="screen"et supprimez cet attribut.
  2. Ensuite, recherchez media="print"et supprimez tout ce lien.
  3. Ensuite, essayez d'imprimer.

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.

James
la source
1
Merci. C'est une excellente solution. Déprimant, mais génial. Le site Web principal avec lequel je rencontre un problème est Wired, qui, pour une raison quelconque, est horriblement imprimé, mais son rendu à l'écran est superbe.
vy32
J'ai besoin d'un plugin qui fait ça.
vy32
3
@ vy32 ce n'est pas une mauvaise idée du tout. Cela faisait un moment que je voulais jouer avec les extensions Chrome. Au cours des vacances, j'ai finalement eu quelques heures. Voici donc PrintScreen, un petit bouton sur lequel vous cliquez quand une page a des sélecteurs de support d'impression / écran CSS personnalisés. link
James
le bouton PrintScreen ne fonctionne pas si bien ???
vy32
1
Je soupçonne qu'il s'agit d'un problème d'expérience utilisateur. Normalement, je me concentrais davantage sur l'expérience utilisateur, mais cette fois, je ne faisais que jouer avec de nouvelles techniques et de nouveaux systèmes, sans y prêter attention. Après avoir cliqué sur le bouton PS, vous devez cliquer sur imprimer normalement. Vous avez raison, il serait plus logique de demander à l’extension d’appeler directement l’impression. Si j’ai le temps cette semaine, je vais essayer de mettre à jour l’extension pour aller directement à l’écran d’impression, comme il se doit. Merci
James
17

Suivant l’ idée de James mais utilisant jQuery:

$('*[media="screen"],*[media="print"]').attr('media', '')

Si page n'a pas jQuery, injectez-le:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
Leo Gallucci
la source
11

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/.

kitchin
la source
1
Cela marche. Suivez les instructions et sélectionnez le type de média "écran". Ensuite, lorsque vous imprimez, il utilisera "écran"
Carl G
Au fur et à mesure que le logiciel évolue, stackexchange devrait répondre, ce qui devrait être la réponse choisie.
Michaël
6

J'ai trouvé un moyen facile de le faire dans Chrome .

Ouvrez l'Outil de développement> Rendu> Sélectionnez "Écran" dans le support Emulate CSS.

Maintenant, essayez d'imprimer. Il choisira l'écran CSS à la place de Print CSS.

dj rock
la source
quel navigateur web?
vy32
Dans le navigateur Chrome
dj rock
Cela fonctionne et est la solution la plus rapide!
Laurent
Plus spécifiquement sur le Chrome actuel: Outils de développement ouverts. Menu 3 points en haut à droite> Autres outils> Rendu. Faites défiler jusqu'à Emulate CSS Media.
Laurent
5

Léo avait une bonne idée là-bas, mais il ne fait pas tout à fait ce que James a dit : ça devrait être

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

Astuce: enregistrez le suivant sous forme de bookmarklet pour une utilisation facile:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

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.

Bastian Blankenburg
la source
4
  1. 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!

  2. 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é.

mgutt
la source
Utiliser les outils de développement Chrome pour définir "Émuler un support CSS" sur "écran" est la seule réponse qui fonctionne.
Benjamin
3

Je viens de rencontrer ce problème avec un site Web qui utilisait un seul fichier CSS @media printet @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

Brian S
la source
Cela a parfaitement fonctionné pour moi. J'avais déjà passé 10 minutes à modifier le texte d'un site en violet car mon imprimante était à court d'encre. En utilisant cette solution, je pouvais installer l’extension, appuyer sur le bouton Web et wallah, cela fonctionnait :)
Chris Nevill
1

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:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

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".

Gruber
la source
0

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.

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);
xs400
la source
-1

Essayez d'activer l' "Print background (colors & images)"option Page Setupet de vérifier son apparence Print Preview(c'est pour FF).

romain
la source
1
N'a pas le résultat souhaité. Désolé.
vy32
-1

Semblable à James - utilisez l'onglet "Sources" dans les outils de développement Chrome et remplacez toutes les instances de media printpar media 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

tu cad cad monsieur - prends ça
la source
-2

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 :-)

Michael Kaufmann
la source
Malheureusement, ce programme crée une impression bitmap, ce qui signifie que les polices sont pixellisées. Ce n'est pas ce que je veux.
vy32