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.
Delete This Node
.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 zeprint
stylami, a następnie usuń wszystkieprint
zastosowane regułya[href]
. Następnie ponownie uruchom podgląd wydruku.Odpowiedzi:
Używanie Narzędzi Chrome dla programistów ( Ctrl+ Shift+ I) jest jedyną rzeczą, która działa.
media="screen"
i usuń ten atrybut.media="print"
i usuń cały ten link.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.
źródło
Zgodnie z pomysłem Jamesa, ale używając jQuery:
Jeśli strona nie ma jQuery, wstrzyknij ją:
źródło
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/
źródło
Znalazłem prosty sposób, aby to zrobić w Chrome .
Teraz spróbuj wydrukować. Wybiera ekran CSS zamiast Drukuj CSS.
źródło
Lew miał tam dobry pomysł , ale nie do końca to, co powiedział James : tak powinno być
Wskazówka: zapisz następujące jako bookmarklet dla łatwego użycia:
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.
źródło
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!
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.
źródło
Właśnie wpadł na ten problem ze strony internetowej, która miała jeden plik CSS za pomocą
@media print
a@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
źródło
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:
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”.
źródło
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.
źródło
Spróbuj włączyć
"Print background (colors & images)"
opcjęPage Setup
i sprawdź, jak to wyglądaPrint Preview
(dla FF).źródło
Podobny do Jamesa - zastosowania „Źródła” w zakładce narzędzi Chrome dla programistów, i zastąpić wszystkie wystąpienia
media print
zmedia 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
źródło
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ę :-)
źródło