Wie drucke ich mit dem Bildschirm-Stylesheet?

Eine Reihe von Websites, die ich verwende, haben wirklich schlechte Stylesheets für die Printmedien, aber ihre Bildschirm-Stylesheets sind ziemlich gut.

Kann ich meinen Browser anweisen, das Druck-Stylesheet zu ignorieren und nur mit dem Bildschirm-Stylesheet zu drucken?

Ich möchte dies auch tun, wenn ich Kunden den Unterschied zwischen den beiden zeigen möchte.

Chrome Developer Tools ( Ctrl+ Shift+ I) ist die einzige Sache , die ich , dass Werke gefunden haben.

1. Suchen Sie nach allen Instanzen media="screen"dieses Attributs und löschen Sie es.
2. Suchen Sie dann nach media="print"dem gesamten Link und löschen Sie ihn.
3. Versuchen Sie dann zu drucken.

Dies gibt mir in der Regel die Seite mit Bildschirmstil.

Wenn Sie wirklich nur Druckstile deaktivieren möchten, können Sie die Web Developer-Erweiterung installieren (ich glaube, es gibt eine Version für Firefox und Chrome). Es hat eine Schaltfläche zum Deaktivieren von Druckstilen. Es erweitert jedoch nicht den "Bildschirm" -Stil zum Drucken, sodass es die meiste Zeit nicht so funktioniert, wie Sie es sich erhoffen.

Folgende James Idee, aber mit jQuery:

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

Wenn die Seite nicht über jQuery verfügt, fügen Sie Folgendes ein:

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

Es gibt eine neue Methode zur direkten Auswahl der Medienemulation in den Entwicklertools: https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Ich habe einen einfachen Weg gefunden, dies in Chrome zu tun .

Öffnen Sie das Developer Tool> Rendern> Wählen Sie unter CSS-Medien emulieren die Option 'Bildschirm'.

Versuchen Sie nun zu drucken. Es wird das Bildschirm-CSS anstelle von Print-CSS ausgewählt.

Leo hatte dort eine gute Idee , aber es tut nicht ganz das, was James sagte : Es sollte sein

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

Tipp: Speichern Sie Folgendes als Lesezeichen, um es einfacher zu verwenden:

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)

Dies lädt jQuery vor und wartet 2 Sekunden, bis es beendet ist. Wenn dies jedoch nicht ausreicht, führen Sie es einfach erneut aus. In der Zwischenzeit sollte jQuery geladen worden sein.

1. Mach was James gesagt hat ;)

   Sie können die Ausgabe überprüfen, indem Sie die Chrome Developer Tools-Einstellungen öffnen (rechte untere Ecke) und unter "Overrides" die Option "Emulate CSS Media Print" -Ansicht auswählen. Durch Umschalten dieser Option können Sie die Druck- und Bildschirmansicht vergleichen. Habe Spaß!

2. Installieren Sie dieses Addon: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Jetzt werden auch Hintergrundbilder und Farben gedruckt.

Bug: Funktioniert nicht mit CSS-Sprites.

BEARBEITEN: Chrome hat die Druckansicht im Jahr 2014 geändert. Ich denke, Sie müssen das verknüpfte Addon nicht mehr verwenden.

Ich bin gerade auf dieses Problem gestoßen, als auf einer Website eine einzige CSS-Datei mit @media printund verwendet @media screenwurde. Die Lösung zum Deaktivieren der separaten Druck-CSS-Datei funktionierte daher bei mir nicht. Während ich das CSS bearbeiten und den Druckblock auskommentieren konnte, während ich die Seite betrachtete, wurden diese Änderungen nicht in die Druckvorschau übernommen.

Die Lösung, die ich gefunden habe, war die Print Edit-Erweiterung für Firefox und Chrome . Sie können die Seite unmittelbar vor dem Drucken bearbeiten und eine einfache Schaltfläche zum Verwenden des Webstils ( @media screen) für die Seite hinzufügen.

Ich musste den Maßstab, in dem ich druckte, geringfügig ändern, da die Druckfläche ein Verhältnis von ungefähr 17:22 hat, während mein Browser ungefähr 16: 9 ist, sodass einige der Inhalte auf der Seite horizontal etwas überfüllt waren. Ich musste auch das Drucken der Hintergrundfarben und -bilder separat aktivieren

Manchmal verwenden Websites CSS, um festzulegen, dass auf dem Bildschirm und beim Drucken unterschiedliche Stile verwendet werden sollen. Das ist oft gut, kann aber auch verwirrend und problematisch sein. Untersuchen Sie den Quellcode der Seite und suchen Sie nach:

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

Ein Grund für dieses Problem ist, dass Websites, die das beliebte Bootstrap-Framework verwenden, die allgegenwärtige Datei bootstrap.min.css verwenden, die den obigen CSS-Stil enthält.

Der Schlüssel, nach dem man suchen muss, ist @media print. Websites haben oft komplexe Strukturen und es kann hilfreich sein, die Seite lokal zu speichern und mit einem rekursiven Textsuchwerkzeug zu überprüfen.

Wenn Sie der Meinung sind, dass Sie die Stelle im CSS-Code gefunden haben, können Sie die Seite mithilfe der Entwicklerfunktionen direkt in Ihrem Browser ändern. (In Chrome drücken Sie Ctrl+ Shift+ I, um sie zu starten.)

Suchen Sie nach dem CSS-Code und entfernen Sie die Zeilen, die das Problem verursachen, oder machen Sie sie ungültig. Vergewissern Sie sich mit "Druckvorschau", dass der Vorgang erfolgreich war.

Installieren Sie das Greasemonkey-Addon und verwenden Sie das unten angegebene Skript.

Ich habe ein Skript geändert, das ich hier gefunden habe: http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Ich habe "screen" am Ende in "print" geändert (ich habe keine Ahnung von jQuery, also stelle mir keine Fragen), damit die Bildschirmversion tatsächlich an den Drucker gesendet wird. Beim Drucken als PDF (mit Foxit- oder Nitro-PDF-Druckern) habe ich den Seitentyp im Querformat auf Tabloid Extra eingestellt, damit die PDF-Größe mehr oder weniger der Bildschirmgröße entspricht. Genießen! Denken Sie daran, ich kenne mich mit Programmierung nicht aus, daher geht das Verdienst an den ursprünglichen Autor.

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

Versuchen Sie, die "Print background (colors & images)"Option in zu aktivieren Page Setupund zu überprüfen, wie sie in aussieht Print Preview(für FF).

Ähnlich wie bei James: Verwenden Sie die Registerkarte "Quellen" in den Chrome Developer Tools und ersetzen Sie alle Instanzen von media printdurch media speech. Daher werden alle CSS-Änderungen zum Ausblenden von Navigationsleisten usw. beim Drucken nicht angewendet (werden jedoch angewendet, wenn Text-to-Speech verwendet wird).

Dies kann mit JQuery wie oben möglich sein.

Dies ist nützlich, da ich das CDN von css verwende, sodass die Anpassung direkt durchgeführt werden kann

Dafür gibt es auf dem Mac ein großartiges Tool.

Paparazzi installieren => URL nach Paparazzi kopieren => Bild speichern als => PDF

(Beim PDF-Export ist sogar der Text auswählbar, es ist nicht nur ein "Bild")

https://derailer.org/paparazzi/screenshots

genießen :-)