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?

J'aimerais aussi faire cela quand je veux montrer aux clients la différence entre les deux.

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.

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

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

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.

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.

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

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

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

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

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

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

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