Wie drucke ich mit dem Bildschirm-Stylesheet?

50

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.

vy32
quelle
Wenn die fraglichen Websites von Drittanbietern stammen, können Sie die Chrome-Entwicklertools (Strg + Umschalt + I) ausprobieren. Klicken Sie dann mit der rechten Maustaste auf den Knoten / das Element (in diesem Fall auf das Druck-Stylesheet) und wählen Sie Delete This Node.
DavChana
Es ist ein Duplikat!
Vy32
Keine direkte Antwort auf Ihre Frage, aber wenn Sie mit Firefox arbeiten, ärgern Sie sich nur darüber, dass alle Links in der Druckvorschau mit ihren vollständigen URLs versehen sind (wer dies für eine gute Idee hält, muss diesdie (http://www.have-an-agonizingly-slow-and-painful-death!!!.com) tun ). Öffnen Sie einfach Inspect Element (Dev Tools) ) , öffnen Sie den Stil-Editor , suchen Sie das Stylesheet mit den Stilen anhand der praktischen @media-Regeln auf der rechten Seite printund entfernen Sie alle printRegeln, auf die Sie angewendet haben a[href]. Starten Sie dann die Seitenansicht erneut.
ADTC

Antworten:

24

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.

James
quelle
1
Vielen Dank. Das ist eine großartige Lösung. Deprimierend, aber großartig. Die Hauptwebsite, mit der ich ein Problem habe, ist Wired, die aus irgendeinem Grund schrecklich gedruckt wird, aber auf dem Bildschirm großartig aussieht.
23.
Ich brauche ein Plugin, das das macht.
Vy32
3
@ vy32 das ist gar keine schlechte idee. Ich wollte schon seit einiger Zeit mit Chrome-Erweiterungen spielen. In den Ferien hatte ich endlich ein paar Stunden Zeit. Hier ist also PrintScreen, eine kleine Schaltfläche, auf die Sie klicken, wenn eine Seite über benutzerdefinierte Druck- / Bildschirm-CSS-Medienauswahlmöglichkeiten verfügt. Link
James
der PrintScreen Button funktioniert nicht so gut ???
30.
1
Ich vermute, dass dies ein Problem der Benutzererfahrung ist. Normalerweise konzentrierte ich mich mehr auf das Benutzererlebnis, aber diesmal spielte ich nur mit neuen Techniken und Systemen und achtete nicht darauf. Nachdem Sie auf die PS-Schaltfläche geklickt haben, müssen Sie auf die normale Weise auf Drucken klicken. Sie haben Recht, es wäre sinnvoller, wenn ich die Nebenstelle direkt den Print aufrufen ließe. Wenn ich diese Woche Zeit habe, werde ich versuchen, die Erweiterung zu aktualisieren, um direkt zum Druckbildschirm zu gelangen, wie es eigentlich sein sollte. Vielen Dank
James
17

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);
Leo Gallucci
quelle
6

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.

DJ Rock
quelle
Welcher Webbrowser?
Vy32
Im Chrome-Browser
DJ Rock
Das funktioniert und ist die schnellste Lösung!
Laurent
Genauer gesagt auf dem aktuellen Chrome: Open Developer Tools. 3-Punkt-Menü oben rechts> Weitere Werkzeuge> Rendern. Scrollen Sie nach unten zu CSS-Medien emulieren.
Laurent
5

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.

Bastian Blankenburg
quelle
4
  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.

mgutt
quelle
Die Verwendung der Chrome-Entwicklertools, um "CSS-Medien emulieren" auf "Bildschirm" zu setzen, ist die einzige Antwort, die funktioniert.
Benjamin
3

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

Brian S
quelle
Das hat bei mir perfekt funktioniert. Ich hatte bereits 10 Minuten damit verbracht, einen Site-Text in Lila zu ändern, da meinem Drucker die Tinte ausgegangen war. Mit dieser Lösung könnte ich die Erweiterung installieren, den Web-Style-Button drücken und wallah es hat funktioniert :)
Chris Nevill
1

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.

Gruber
quelle
0

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);
xs400
quelle
-1

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

römisch
quelle
1
Hat nicht das gewünschte Ergebnis. Es tut uns leid.
7.
-1

Ä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

Sie Cad Sir - nehmen Sie das
quelle
-2

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

Michael Kaufmann
quelle
Leider wird mit diesem Programm eine Bitmap gedruckt, was bedeutet, dass die Schriftarten gerastert werden. Es ist nicht was ich will.
VY32