Jak drukować za pomocą arkusza stylów ekranu?

50

Wiele stron internetowych, z których korzystam, ma naprawdę złe arkusze stylów dla mediów drukowanych, ale ich arkusze stylów ekranu są całkiem dobre.

Czy jest jakiś sposób, aby powiedzieć mojej przeglądarce, aby zignorowała arkusz stylów drukowania i po prostu drukowała za pomocą arkusza stylów ekranu?

Chciałbym to również zrobić, gdy chcę pokazać klientom różnicę między nimi.

vy32
źródło
Jeśli witryny, o których mowa, należą do stron trzecich, być może możesz wypróbować Narzędzia programistyczne Chrome (Ctrl + Shift + I), a następnie kliknij prawym przyciskiem myszy węzeł / element (w tym przypadku arkusz stylów drukowania) i wybierz Delete This Node.
DavChana,
To jest duplikat!
vy32
Nie jest to bezpośrednia odpowiedź na twoje pytanie, ale jeśli jesteś w Firefoksie, po prostu denerwujesz się, że wszystkie linki są dołączone wraz z pełnymi adresami URL na podglądzie wydruku (ktokolwiek myślał, że to świetny pomysł, musi die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)) po prostu otwórz Inspect Element (Dev Tools ) , przejdź do Edytora stylów , użyj przydatnej listy reguł @media po prawej stronie, aby znaleźć arkusz stylów ze printstylami, a następnie usuń wszystkie printzastosowane reguły a[href]. Następnie ponownie uruchom podgląd wydruku.
ADTC

Odpowiedzi:

24

Używanie Narzędzi Chrome dla programistów ( Ctrl+ Shift+ I) jest jedyną rzeczą, która działa.

  1. Wyszukaj wszystkie wystąpienia media="screen"i usuń ten atrybut.
  2. Następnie wyszukaj media="print"i usuń cały ten link.
  3. Następnie spróbuj wydrukować.

Ogólnie daje mi to stronę ze stylem ekranu.

Jeśli naprawdę chcesz po prostu wyłączyć style drukowania, możesz zainstalować rozszerzenie Web Developer (myślę, że jest wersja dla Firefoxa i Chrome). Posiada przycisk do wyłączania stylów drukowania. Jednak nie rozszerza stylu drukowania na ekran, więc przez większość czasu nie działa tak, jak tego oczekujesz.

James
źródło
1
Dzięki. To świetne rozwiązanie. Przygnębiające, ale świetnie. Główną witryną, z którą mam problem, jest Wired, która z jakiegoś powodu drukuje się okropnie, ale wygląda świetnie na ekranie.
vy32
Potrzebuję wtyczki, która to robi.
vy32,
3
@ vy32 to wcale nie jest zły pomysł. Od dłuższego czasu chciałem grać z rozszerzeniami Chrome. W czasie wakacji miałem w końcu kilka godzin. Oto PrintScreen, mały przycisk, który można kliknąć, gdy strona ma niestandardowe selektory mediów drukowania / ekranu css. link
James
przycisk PrintScreen nie działa tak dobrze ???
vy32
1
Podejrzewam, że jest to problem z doświadczeniem użytkownika. Zwykle kładę większy nacisk na wrażenia użytkownika, ale tym razem bawiłem się nowymi technikami i systemami i nie zwracałem uwagi. Po kliknięciu przycisku PS musisz kliknąć normalny sposób drukowania. Masz rację, miałoby to większy sens, gdybym miał rozszerzenie zadzwonić bezpośrednio do druku. Jeśli będę miał czas w tym tygodniu, spróbuję zaktualizować rozszerzenie, aby przejść bezpośrednio do ekranu drukowania, tak jak powinno. Dzięki
James
17

Zgodnie z pomysłem Jamesa, ale używając jQuery:

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

Jeśli strona nie ma jQuery, wstrzyknij ją:

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
źródło
6

Znalazłem prosty sposób, aby to zrobić w Chrome .

Otwórz Narzędzie programisty> Rendering> Wybierz „ekran” w Emuluj media CSS.

Teraz spróbuj wydrukować. Wybiera ekran CSS zamiast Drukuj CSS.

dj rock
źródło
która przeglądarka internetowa
vy32
W przeglądarce Chrome
dj rock
To działa i jest najszybszym rozwiązaniem!
Laurent,
Mówiąc dokładniej o bieżącym Chrome: Otwórz narzędzia programistyczne. Menu z trzema kropkami w prawym górnym rogu> Więcej narzędzi> Renderowanie. Przewiń w dół, aby Emulować CSS Media.
Laurent,
5

Lew miał tam dobry pomysł , ale nie do końca to, co powiedział James : tak powinno być

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

Wskazówka: zapisz następujące jako bookmarklet dla łatwego użycia:

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)

To wstępnie ładuje jQuery i czeka 2 sekundy na jego zakończenie, ale jeśli to czekanie nie wystarczy, po prostu uruchom je ponownie, jQuery powinien zostać w międzyczasie załadowany.

Bastian Blankenburg
źródło
4
  1. Rób wszystko, co powiedział James ;)

    Możesz sprawdzić dane wyjściowe, otwierając ustawienia Narzędzi Chrome dla programistów (prawy dolny róg) i wybrać w „Zastępuje” opcję „Emuluj druk mediów CSS”. Przełączając tę ​​opcję, możesz porównać widok wydruku i ekranu. Baw się dobrze!

  2. Zainstaluj ten dodatek: https://chrome.google.com/webstore/detail/print-background-colours/gjecpgdgnlanljjdacjdeadjkocnnamk

Teraz drukowane są również obrazy tła i kolory.

Błąd: nie działa z duszkami CSS.

EDYCJA: Chrome zmienił widok wydruku w 2014 r. Myślę, że nie musisz już korzystać z połączonego dodatku.

mgutt
źródło
Używanie Narzędzi Chrome dla programistów w celu ustawienia „Emuluj media CSS” na „ekran” jest jedyną działającą odpowiedzią.
Benjamin,
3

Właśnie wpadł na ten problem ze strony internetowej, która miała jeden plik CSS za pomocą @media printa @media screen, więc rozwiązanie, aby wyłączyć osobny plik wydruku CSS nie działa dla mnie. Chociaż z pewnością mogłem edytować CSS i komentować blok wydruku podczas przeglądania strony, zmiany te nie zostały przeniesione do podglądu wydruku.

Rozwiązaniem, które znalazłem, było rozszerzenie Print Edit dla Firefoksa i Chrome . Umożliwia edycję strony bezpośrednio przed drukowaniem i zawiera prosty przycisk do korzystania ze strony internetowej Style ( @media screen).

Musiałem nieznacznie zmienić skalę, na której drukowałem, ponieważ powierzchnia wydruku ma w przybliżeniu proporcję 17:22, a moja przeglądarka ma w przybliżeniu 16: 9, więc niektóre rzeczy na stronie robiły się nieco zatłoczone w poziomie. Musiałem także umożliwić osobne drukowanie kolorów i obrazów tła

Brian S.
źródło
To działało idealnie dla mnie. Spędziłem już 10 minut, zmieniając tekst witryny na fioletowy, ponieważ w mojej drukarce zabrakło atramentu. Korzystając z tego rozwiązania, mogłem zainstalować rozszerzenie, wcisnąć przycisk stylu strony i ścianka działało :)
Chris Nevill
1

Czasami strony internetowe używają CSS do określenia, że różne style powinny być używane na ekranie i podczas drukowania. Jest to często dobre, ale może być także mylące i problematyczne. Sprawdź kod źródłowy strony i poszukaj czegoś takiego:

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

Jednym z powodów, dla których ten problem jest powszechny, jest to, że strony internetowe korzystające z popularnej struktury Bootstrap używają wszechobecnego pliku bootstrap.min.css , który zawiera powyższy styl CSS.

Kluczową rzeczą jest, aby szukać @media print. Witryny często mają złożoną strukturę i może pomóc lokalnie zapisać stronę i sprawdzić ją za pomocą rekurencyjnego narzędzia do wyszukiwania tekstu.

Gdy uważasz, że znalazłeś miejsce w kodzie CSS, możesz zmodyfikować stronę bezpośrednio w przeglądarce, korzystając z funkcji programisty. (W Chrome naciśnij Ctrl+ Shift+, Iaby je uruchomić).

Wyszukaj kod CSS i po prostu usuń lub unieważnij wiersze powodujące problem. Sprawdź, czy operacja zadziałała, używając „Podgląd wydruku”.

Gruber
źródło
0

Zainstaluj dodatek Greasemonkey i użyj skryptu podanego poniżej.

Zmodyfikowałem skrypt, który tu znalazłem http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Na końcu zmieniłem „screen” na „print” (nie mam pojęcia o jQuery, więc nie zadawaj mi żadnych pytań), aby w efekcie wysyłać wersję screena do drukarki. Podczas drukowania do formatu pdf (przy użyciu drukarek Foxit lub Nitro Pdf) ustawiam typ strony na Tabloid Extra w trybie poziomym, aby rozmiar pdf mniej więcej odpowiadał rozmiarowi ekranu. Cieszyć się! Pamiętaj, że nie wiem nic o programowaniu, więc uznanie należy się pierwotnemu autorowi.

// ==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
źródło
-1

Spróbuj włączyć "Print background (colors & images)"opcję Page Setupi sprawdź, jak to wygląda Print Preview(dla FF).

rzymski
źródło
1
Nie ma pożądanego rezultatu. Przepraszam.
vy32,
-1

Podobny do Jamesa - zastosowania „Źródła” w zakładce narzędzi Chrome dla programistów, i zastąpić wszystkie wystąpienia media printz media speech. W związku z tym wszystkie zmiany css w celu ukrycia pasków nawigacyjnych itp. Nie zostaną zastosowane podczas drukowania (ale zostaną zastosowane, gdy użyty zostanie syntezator mowy)

Może to być wykonalne z JQuery jak wyżej.

Jest to przydatne, ponieważ używam CDN css, więc dostosowanie jest od razu

proszę pana - weź to
źródło
-2

Jest na to świetne narzędzie na Macu.

Zainstaluj Paparazzi => skopiuj adres URL do Paparazzi => Zapisz obraz jako => PDF

(w eksportach PDF nawet tekst jest do wyboru, nie jest to tylko „obraz”)

https://derailer.org/paparazzi/screenshots

cieszyć się :-)

Michael Kaufmann
źródło
Niestety program ten drukuje bitmapy, co oznacza, że ​​czcionki są rasteryzowane. Nie tego chcę.
vy32