web-dev-qa-db-fra.com

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

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?

Je voudrais aussi faire cela quand je veux montrer aux clients la différence entre les deux.

browserprinting
45
vy32

Utilisation des outils de développement Chrome (Ctrl+Shift+I) est la seule chose que j'ai trouvé qui fonctionne.

  1. Recherchez toutes les instances de media="screen" et supprimez cet attribut.
  2. Ensuite, recherchez media="print" et supprimez tout le 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.

22
James

Suivant l'idée de James mais en 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);
15
Leo Gallucci

Il existe une nouvelle méthode pour 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/

9
kitchin

Léo y avait une bonne idée , mais il ne fait pas tout à fait ce que a dit James : ç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.

5
Bastian Blankenburg

  1. Faites n'importe quoi James 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é.

4
mgutt

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 va choisir l'écran CSS à la place de Print CSS.

2
dj rock

Je viens de rencontrer ce problème avec un site Web qui ne contenait qu'un seul fichier CSS utilisant @media print et @media screen; la solution permettant de désactiver le fichier CSS d'impression séparé ne fonctionnait donc pas pour moi. Bien que je puisse certainement éditer le code CSS et mettre en commentaire le bloc d'impression lors de l'affichage de 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) de 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

2
Brian S

Parfois, les sites Web utilisent CSS pour spécifier que styles différents doit être utilisé à 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 fichier Bootstrap Framework utilisent le fichier omniprésent bootstrap.min.css , 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 + I pour 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".

1
Gruber

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- paraître pareil/

J'ai changé "screen" en "print" à la fin (je n'ai aucune idée de jQuery, alors ne me posez pas de questions) afin 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);
0
xs400