Jak uzyskać WYSIWYP (wydrukować to, co widzisz) w przeglądarce internetowej?

Kiedy drukuję stronę internetową z przeglądarki, spodziewam się, że dostanę na papierze dokładnie tę treść, którą widzę w przeglądarce. Mówiąc dokładniej: oczekuję, że przeglądarka będzie renderować tę samą zawartość strony w ten sam sposób, z wyjątkiem płótna o nieskończonej wysokości, a następnie zdecyduję w sposób specyficzny dla drukowania, jak rozdzielić wyniki na fizyczne strony papieru.

Jednak tak się nie dzieje na wielu stronach internetowych. Mogą wydrukować coś zupełnie innego. Nigdy nie prosiłem o to przeglądarek i nie chcę, żeby tak się stało.

Czy istnieje sposób, aby uzyskać to, czego chcę (oprócz robienia zrzutów ekranu, skrupulatnego wycinania i wklejania ich razem oraz drukowania powstałych obrazów)? Czy istnieje sposób, aby powiedzieć przeglądarce internetowej, z której korzystam (Firefox, Chrome, Safari, IE lub Opera): „wydrukuj tę stronę tak, jakbyś renderował ją w oknie przeglądarki o wysokim poziomie”?

(PS: patrz także: Drukowanie z przeglądarki przy użyciu Screen CSS ?)

Chrome ma tę funkcję wbudowaną w Narzędzia programistyczne, ale w bardzo nieoczywistej lokalizacji.

• Otwórz narzędzia programistyczne (Windows: F12lub Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Kliknij przycisk Dostosuj i kontroluj menu hamburgera DevTools i wybierz Więcej narzędzi> Ustawienia renderowania (lub Renderowanie w nowszych wersjach).
• Zaznacz pole wyboru Emuluj nośnik wydruku na karcie Rendering i wybierz typ nośnika ekranowego .

Cytowane głównie z tej odpowiedzi . Zobacz różnicę poniżej.

Teraz, kiedy drukujesz, wydruk będzie dokładnie taki, jaki widzisz. Pamiętaj, aby pozostawić otwarte narzędzia programistyczne do momentu wydrukowania. Po zamknięciu narzędzi programistycznych ustawienia renderowania zostaną przywrócone do normy.

Uwaga: Inspiracja do tej odpowiedzi pochodzi z https://superuser.com/a/568847/176146 . Ale rzeczywista treść tej odpowiedzi jest od lmeurs ' odpowiedź . Jest prawie dokładnie tak samo, ale staramy się zrobić dokładnie odwrotność ich odpowiedzi, więc zamiast ustawienia zastępowania na Drukuj ustawia się na Ekran .

Dlaczego moje strony internetowe nie drukują tego, co widzę w przeglądarce?

Niektóre strony drukują się inaczej, ponieważ mają arkusz stylów drukowania .

Co to jest arkusz stylów drukowania?

Arkusz stylów drukowania formatuje stronę internetową, więc po wydrukowaniu automatycznie drukuje się w formacie przyjaznym dla użytkownika. Arkusze stylów drukowania istnieją już od wielu lat i wiele o nich pisano. Jednak tak niewiele stron internetowych je implementuje, co oznacza, że ​​mamy strony, które frustrująco nie drukują poprawnie na papierze.

To niezwykłe, że tak niewiele witryn używa arkuszy stylów drukowania jako:

• Drukuj arkusze stylów znacznie poprawiają użyteczność, szczególnie na stronach z dużą ilością treści (takich jak ta!)
• Są fenomenalnie szybkie i łatwe w konfiguracji

Niektóre strony internetowe oferują link do wersji strony, którą można wydrukować, ale oczywiście należy ją skonfigurować i obsługiwać. Wymaga to również, aby użytkownicy zauważyli ten link na ekranie, a następnie użyli go przed zwykłym sposobem drukowania stron (np. Wybierając przycisk drukowania u góry ekranu). Wersje przyjazne do wydruku są jednak przydatne podczas drukowania wielu stron internetowych w tym samym czasie, np. Artykułu obejmującego kilka stron internetowych.

Source Disable Print Stylesheets (CSS) Podczas drukowania strony internetowej

Jak wyłączyć arkusz stylów drukowania?

Niedawno potrzebowałem zrobić migawkę strony dokładnie takiej, jaka jest wyświetlana na ekranie. To znaczy, chciałem kolor tła, chciałem reklamy, chciałem pełny układ.

Jedną z opcji jest robienie kolejnych zrzutów ekranu podczas przewijania strony, a następnie łączenie ich z powrotem w Photoshopie. Jest to czasochłonne i pozostawia obraz o niskiej rozdzielczości (72 dpi).

Innym sposobem na to jest wydrukowanie strony, a następnie „zapisanie jako” PDF zamiast drukowania. Działa to całkiem dobrze w przypadku stron, które nie definiują innego układu do drukowania strony niż do przeglądania strony.

Niestety dla mnie coraz popularniejsze staje się umieszczanie arkusza stylów „drukuj” na stronie internetowej, który definiuje nowe style strony, gdy użytkownik próbuje wydrukować stronę. Jest to zdefiniowane w nagłówku i wygląda mniej więcej tak:

Znalazłem tylko jedną opcję, która naprawdę odpowiada moim potrzebom: dodatek / rozszerzenie „Web Developer” opracowane przez Chrisa Pedericka.

Dzięki tej wtyczce możesz bardzo łatwo wyłączyć WSZYSTKIE style, style domyślne, style wbudowane, style osadzone i, jak zgadłeś, drukować style!

Jest obecnie dostępny dla przeglądarek Firefox i Chrome. Naprawdę mam nadzieję, że któregoś dnia pojawi się rozszerzenie Safari, ponieważ używam głównie Safari. Jedyną opcją, jaką znalazłem dla Safari, jest wyłączenie WSZYSTKICH stylów - funkcja domyślnie dostępna w najnowszej wersji (5.0.3) przeglądarki. Jest to przydatne podczas programowania, aby zobaczyć, jak Twoja witryna będzie wyświetlana w przeglądarce tekstowej, ale bez możliwości wyboru stylów, które wyłączasz, ma ograniczoną użyteczność.

Oto przykład wyłączenia stylów drukowania z powyższym rozszerzeniem w przeglądarce Firefox:

Arkusz stylów wydruku źródłowego - ostateczny przewodnik

Brak wtyczki dla przeglądarki Firefox: Otwórz Web Developer Tools, w Default Tools Tools (ikona koła zębatego) zaznacz „Zrób zrzut ekranu całej strony”. Musisz wykonać tę część tylko raz.

Następnie w Narzędziach programisty kliknij ikonę aparatu. Cała strona zostanie zapisana jako plik .png. Stąd możesz go wydrukować, przekonwertować do formatu pdf itp.

Korzystam z rozszerzenia Chrome: zrzut ekranu strony internetowej . Za pomocą dwóch kliknięć cała strona jest konwertowana na jpg lub pdf. Nie musisz już sam sklejać zrzutów ekranu. Ta strona wygląda następująco:

Miałem również podobny problem. Obecnie używam wersji przyjaznej do drukowania i PDF Extenstion dla Chrome .

Najlepszą funkcją jest to, że mogę ręcznie usunąć elementy, których nie chcę w moim wydruku / PDF.

Oto kolejny o nazwie OpenScreenShoot . Uwielbiam to, ponieważ jest to Open source, dostępne na GitHub, i działało dla mnie na bardzo długiej stronie, na której inne alternatywy, takie jak WebpageScreenShot, zawiodły.

(Ryzyko przekształcenia tego w zestaw odpowiedzi na zalecenia dotyczące oprogramowania , ale jak dotąd instalacja i używanie rozszerzenia przeglądarki X wydaje się być jedyną odpowiedzią, która faktycznie działa :)

Ostatnio używam do tego celu rozszerzenia Open Screenshot Chrome i jestem z tego bardzo zadowolony. Nie miał problemów z długą stroną Quora .

Aktualizacja (listopad 2017 r.): Nie jest to już najlepsza opcja: Firefox i Chrome obsługują teraz robienie zrzutów ekranu na całej stronie w Narzędziach programisty .

Dziś można to zrobić w przeglądarce Firefox (teraz używam wersji 65.0.2) w następujący sposób:

1. Naciśnij klawisz F12. Pojawi się panel Narzędzi programisty.
2. W prawym górnym rogu znajduje się ikona aparatu. Aby zrobić zrzut ekranu całej strony, kliknij ją.

W Ustawieniach (aby uzyskać do nich dostęp, kliknij trzy kropki po prawej stronie ikony kamery), możesz nieznacznie dostosować jego zachowanie; domyślnie zapisze zrzut ekranu w folderze pobierania Firefoksa.

Jeśli brakuje ikony kamery, musisz ją najpierw włączyć w Ustawieniach .