2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73

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

Kiedy drukuję stronę internetową z przeglądarki, oczekuję, że otrzymam na papierze dokładnie taką treść, jaką widzę w przeglądarce. Dokładniej mówiąc: Oczekuję, że przeglądarka wyrenderuje tę samą zawartość strony w ten sam sposób, tyle że na płótnie o nieskończonej wysokości, a następnie zdecyduje w specyficzny dla druku sposób, jak rozłożyć wyniki na fizycznych stronach papieru.

Jednak na wielu stronach internetowych wcale tak się nie dzieje. Mogą one drukować coś zupełnie innego. Nigdy nie prosiłem, aby przeglądarki to robiły i nie chcę, aby tak się działo.

Czy istnieje sposób, aby uzyskać to, czego chcę (inny niż robienie zrzutów ekranu, żmudne wycinanie i wklejanie ich razem, a następnie drukowanie wynikowych obrazów)? Czy istnieje sposób, aby powiedzieć przeglądarce internetowej, której używam (Firefox, Chrome, Safari, IE lub Opera): “wydrukuj tę stronę tak, jak byś ją renderował w arbitralnie wysokim oknie przeglądarki”?

(PS: zobacz też: Print From Browser Using Screen CSS ?)
来源

答案 (8)

42
42
42
2017-11-26 06:13:40 +0000

Chrome ma tę funkcję wbudowaną w Narzędzia dla programistów, ale w bardzo nieoczywistym miejscu.

  • Otwórz Narzędzia deweloperskie (Windows: F12 lub Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Kliknij przycisk menu hamburgerowego Dostosuj i kontroluj DevTools i wybierz Więcej narzędzi > Ustawienia renderowania (lub Rendering w nowszych wersjach).
  • Zaznacz pole wyboru Emulate print media na karcie Rendering i wybierz typ nośnika Screen.

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

Teraz, gdy drukujesz, wydruk będzie dokładnie taki, jaki widzisz. Upewnij się, że narzędzia deweloperskie są otwarte, dopóki nie wydrukujesz. Po zamknięciu narzędzi deweloperskich ustawienie Rendering zostanie przywrócone do normalnego stanu.

Uwaga: Inspiracja dla tej odpowiedzi pochodzi z https://superuser.com/a/568847/176146 . Ale rzeczywisty tekst tej odpowiedzi pochodzi z lmeurs ’ odpowiedź . Jest to prawie dokładnie to samo, ale próbujemy zrobić dokładne przeciwieństwo ich odpowiedzi, więc zamiast ustawiać nadpisanie na Print jest ustawione na Screen.
来源
23
23
23
2014-11-28 12:59:05 +0000

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

Powodem, dla którego niektóre z Państwa stron internetowych drukują się inaczej jest to, że posiadają print stylesheet.

Czym jest arkusz stylów wydruku?

Arkusz stylów wydruku formatuje stronę internetową tak, że po wydrukowaniu jest ona automatycznie drukowana w formacie przyjaznym dla użytkownika. Arkusze stylów drukowania istnieją już od wielu lat i wiele się o nich pisze. Jednak tak niewiele stron internetowych je implementuje, co oznacza, że jesteśmy pozostawieni ze stronami internetowymi, które frustrująco nie są poprawnie drukowane na papierze.

To zadziwiające, że tak niewiele stron internetowych używa arkuszy stylów wydruku:

  • Arkusze stylów drukowania ogromnie poprawiają użyteczność, szczególnie w przypadku stron z dużą ilością treści (takich jak ta!)
  • Są fenomenalnie szybkie i łatwe do skonfigurowania

Niektóre strony internetowe oferują link do wersji strony przyjaznej do drukowania, ale to oczywiście wymaga skonfigurowania i utrzymania. 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 drukowania są jednak użyteczne w przypadku drukowania kilku stron internetowych naraz, takich jak artykuł który rozciąga się na kilka stron internetowych.

Źródło Wyłączanie arkuszy stylów wydruku (CSS) podczas drukowania strony

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

Ostatnio potrzebowałem uzyskać zrzut strony internetowej dokładnie w takiej postaci, w jakiej jest ona wyświetlana na moim ekranie. To znaczy, chciałem mieć kolor tła, chciałem reklamy, chciałem mieć 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 (72dpi).

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

Niestety dla mnie, coraz bardziej popularne staje się dołączanie arkusza stylów “drukuj” na stronie internetowej, który definiuje nowe style strony, gdy użytkownik próbuje wydrukować stronę. Jest on zdefiniowany 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” opracowany przez Chrisa Pedericka

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

Jest on obecnie dostępny dla Firefoxa i Chrome. Mam szczerą nadzieję, że rozszerzenie dla Safari pojawi się pewnego dnia, ponieważ głównie używam Safari. Jedyną opcją, jaką znalazłem dla Safari, jest wyłączenie WSZYSTKICH stylów - jest to funkcja, która jest domyślnie dostępna w najnowszej wersji (5.0.3) przeglądarki. Jest to przydatne podczas tworzenia strony, aby zobaczyć, jak będzie ona wyglądała na przeglądarce tekstowej, ale bez możliwości wybrania stylów, które wyłączamy, ma to ograniczoną użyteczność.

Oto przykład wyłączenia stylów wydruku za pomocą powyższego rozszerzenia w przeglądarce Firefox:

Źródło Print stylesheet - the definitive guide .
来源
9
9
9
2017-05-09 13:01:26 +0000

Rozwiązanie bez wtyczki dla Firefoksa: Otwórz Web Developer Tools, w Default Developer Tools (ikona koła zębatego) zaznacz “Zrób zrzut ekranu całej strony”. Tę część musisz zrobić tylko raz.

Następnie w Developer Tools, kliknij ikonę aparatu fotograficznego. Cała strona zostanie zapisana jako .png. Stąd możesz ją wydrukować, przekonwertować do pdf, itp.
来源
8
8
8
2014-12-02 07:29:40 +0000

Używam rozszerzenia Chrome: Zrzut ekranu strony internetowej . Za pomocą dwóch kliknięć cała strona jest konwertowana do jpg lub pdf. Nie trzeba już samemu sklejać zrzutów ekranu. Ta strona wygląda tak:

来源
3
3
3
2016-10-12 11:47:35 +0000

Ja również spotkałem się z podobnym problemem. Obecnie używam Print Friendly and PDF Extenstion for Chrome .

Najlepszą cechą jest to, że mogę ręcznie usunąć elementy, których nie chcę w moim Print/PDF.
来源
1
1
1
2016-10-27 18:42:56 +0000

(Ryzykując przekształcenie tego w zestaw odpowiedzi Software Recommendations , ale jak dotąd, install and use browser extension X wydaje się być jedynym rodzajem odpowiedzi, która faktycznie działa).

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

_Update (listopad, 2017): to nie jest już najlepsza opcja: Firefox i Chrome obsługują teraz robienie pełnostronicowych zrzutów ekranu w swoich Narzędziach dewelopera _.
来源
1
1
1
2019-03-14 12:26:08 +0000

Obecnie można to zrobić w Firefoksie (używam 65.0.2) w następujący sposób:

  1. Naciśnij klawisz F12. Pojawi się panel Developer Tools.
  2. W pobliżu prawego górnego rogu znajduje się ikona kamery. Aby zrobić zrzut ekranu całej strony, kliknij na nią.

W Ustawieniach (aby się do nich dostać, kliknij trzy kropki na prawo od ikony aparatu) możesz nieco dostosować jego zachowanie; domyślnie zapisuje on zrzut ekranu w folderze pobierania Firefoksa.

Jeśli brakuje ikony aparatu, trzeba ją najpierw włączyć w Ustawieniach.

来源
1
1
1
2017-06-22 16:06:45 +0000

Oto kolejny o nazwie OpenScreenShoot . Uwielbiam go, ponieważ jest Open Source, dostępny na GitHub, i pracował dla mnie dla bardzo długiej strony internetowej, na której, inne alternatywy jak WebpageScreenShot zawiodły.
来源