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

70

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

reinierpost
źródło
1
możliwy duplikat wydruku z przeglądarki przy użyciu Screen CSS?
Ƭᴇcʜιᴇ007
Rozszerzenie Chrome „Aplikacja do przechwytywania ekranu Nimbus” może zrobić zdjęcie całej strony internetowej pokazanej na ekranie (w tym części, której nie widać bez przewijania). To znaczy, jakbyś zrobił serię zrzutów ekranu i połączył je, ale to tylko jedno kliknięcie przycisku.
AE
1
Arkusze stylów drukowania są zasadniczo przydatne. Czy drukując tę ​​stronę, na przykład, chcę pytania i odpowiedzi, czy też chcę tytuł, powiązane pytanie i stopkę? Doceniam również to, że wszystkie komentarze są widoczne. Strony internetowe są interaktywne, kawałki papieru nie są (przez większość czasu), a te arkusze stylów mogą pomóc skupić się na treści, oszczędzając atrament i papier.
SBoss,
1
@SBoss: Nie każdy, kto wydrukuje stronę, będzie zainteresowany tymi samymi rzeczami. Sugerowałbym, aby strona przyjazna do wydruku pozwoliła użytkownikowi wybrać, co należy wydrukować, i powinna mieć wersję do wydruku zgodną z wersją ekranową, z wyjątkiem - zwykle - elementów sterujących wyświetlających to, co zostanie wydrukowane (powinna istnieć opcja włączaj i wyłączaj je na wydrukach, ale i tak powinny się pojawiać na ekranie).
supercat
1
Co do pytania, które jest duplikatem: próbowałem usunąć arkusz stylów drukowania przed drukowaniem i to nie działa, więc nie sądzę, aby pytanie było duplikatem.
reinierpost

Odpowiedzi:

37

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 .

Benzoes
źródło
Firefox uzyskał tę funkcję również w ubiegłym roku. Jest to oczywiście lepsza metoda, ale czy powinienem odrzucić starą odpowiedź z tego powodu?
reinierpost
@reinierpost to oczywiście zależy od ciebie. Ale w twojej decyzji mogą być pomocne następujące informacje - meta.stackexchange.com/q/93969/226780
Benjamin,
Dzięki; odpowiedzi te mówią, że powinienem zmienić, więc zrobię to, mimo że wcześniej zaakceptowana odpowiedź wydaje się być najbardziej pomocną możliwą odpowiedzią w chwili jej napisania.
reinierpost
W tej chwili, gdy próbuję tego w Chrome, widzę tę opcję tylko w trybie widoku mobilnego; Nie mogę go uzyskać dla zwykłego widoku strony na pulpicie.
reinierpost
Firefox ma również tę możliwość, ale w inny sposób. Przypuszczam, że osobna odpowiedź musi to udokumentować. Nie jestem pewien co do innych przeglądarek.
reinierpost
22

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:

wprowadź opis zdjęcia tutaj

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

DavidPostill
źródło
2
Dzięki, ale to nie pomaga stronie, na której próbowałem (trelloprinter.com). Dziwi mnie, jak ci ludzie mają odwagę napisać, że „frustrujące jest to, że wiele stron internetowych ich nie implementuje”, kiedy są całkowicie zepsute podejście do problemu, który próbują rozwiązać. Posiadanie osobnych arkuszy stylów do drukowania oznacza, że ​​nie udało Ci się zaprojektować interfejsu użytkownika 101 lub nigdy go nie wziąłeś.
reinierpost
1
Być może ScreenshotCaptor zrobi to, co musisz osiągnąć ... między innymi uchwyci przewijane regiony ... ale wydaje mi się, że pamiętam, że nie działa zbyt dobrze z Mapami Google.
DavidPostill
1
To niewiele pomoże. Jeśli używasz IE (wiem, zapisz swoje skały na później), możesz użyć Greenshot ( getgreenshot.org ), który ma opcję przewijania strony IE i zrobienia jej z ekranu drukowania . Połączy całą stronę w 1 zrzut ekranu. Następnie możesz go edytować według własnego życzenia.
Ismael Miguel
18
@reinierpost "Posiadanie oddzielnych arkuszy stylów do drukowania oznacza, że ​​nie udało Ci się zaprojektować interfejsu użytkownika 101" - To strasznie szeroki pędzel, którym się tam malujesz. Czy mówisz mi, że jeśli wydrukowałeś tę stronę, chciałbyś mieć z boku pytania dotyczące gorącej sieci lub informacje o pokojach rozmów? Niektóre części strony są przydatne tylko w interaktywnym kontekście - po co marnować miejsce i drukować je atramentem?
Chris Hayes
4
@reinierpost Co za śmieszne stwierdzenie. Załóżmy, że witryna ma ciemne tło z jasnym pierwszym planem. Nie będę mówić w twoim imieniu, ale osobiście cieszę się, że przeglądarka ma własne style drukowania, a także wiele witryn, dzięki czemu nie marnuję całego atramentu podczas drukowania. Istnieje wiele powodów, dla których chcesz wydrukować samą treść, a nie zrzut ekranu.
Brad
9

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.

Russ
źródło
Wow ... właśnie tego szukałem. Dziękuję Ci!
reinierpost
4
Ta funkcja nie wymaga już Narzędzi dla programistów! Po prawej stronie paska adresu wybierz trzy kropki, kliknij „Zrób zrzut ekranu”, a następnie wybierz „Zapisz całą stronę”.
numbermaniac
To jest niesamowite, dziękuję!
codingjeremy
8

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: Demo zrzutu ekranu strony internetowej

Ruut
źródło
1
To też wydaje się działać. Miałem nadzieję, że PDF da mi skalowalną grafikę, ale to tylko mapa bitowa.
reinierpost
1
Cóż za wspaniały sposób na udowodnienie swojej odpowiedzi! :) Zaakceptowałbym ten jako odpowiedź ..
Vijay Chavda
Niesamowite rozszerzenie! Wygląda na to, że pdf tworzy się w trybie poziomym. Czy można utworzyć pdf w trybie pionowym? @reinierpost
user674669
3

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.

Nikhil
źródło
Ciekawe ... w Firefox używam do tego bookmarkletu PrintWhatYouLike . Działa dobrze, ale nie obsługuje przewijania „nieskończonego” (np. Quora) - to rozszerzenie również nie działa.
reinierpost
Dobra wskazówka - dzięki! Domyślnie zachowuje tekst jako tekst, linki jako linki i wyświetla obrazy w pełnym rozmiarze. 6-stronicowy artykuł z kilkoma dużymi zdjęciami jest teraz nieskazitelnym plikiem PDF o wielkości 500 KB.
Mike Honey
1

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.

Vijay Chavda
źródło
Myślę, że chciałeś powiedzieć „zrzut ekranu strony jednym kliknięciem” zamiast „Otwórz zrzut ekranu”. Dobrze?
user674669,
1

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

reinierpost
źródło
Myślę, że chciałeś powiedzieć „zrzut ekranu strony jednym kliknięciem” zamiast „Otwórz zrzut ekranu”. Dobrze?
user674669,
Nie. Najwyraźniej sami się zmienili. Nie jestem pewien, co zrobić z tą odpowiedzią.
reinierpost
1

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 .

Narzędzie do zrzutów ekranu w Firefox Developer Tools

reinierpost
źródło