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

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.

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.

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

Istnieje nowa metoda bezpośredniego wyboru emulacji mediów w Narzędziach programisty, patrz https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

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.

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.

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.

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

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

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

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

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

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