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

Hoe krijg ik WYSIWYP (print wat je ziet) in een web browser?

Als ik een webpagina vanuit mijn browser afdruk, verwacht ik op papier precies dezelfde inhoud te krijgen als ik in de browser zie. Om precies te zijn: Ik verwacht dat de browser dezelfde pagina-inhoud op dezelfde manier weergeeft, behalve op een canvas met oneindige hoogte, en dan op een drukspecifieke manier beslist hoe de resultaten over fysieke pagina’s papier worden verdeeld.

Dat is echter helemaal niet wat er op veel websites gebeurt. Zij drukken misschien iets heel anders af. Ik heb er nooit om gevraagd dat browsers dit doen en ik wil ook niet dat het gebeurt.

Is er een manier om te krijgen wat ik wil (anders dan screenshots maken, die minutieus aan elkaar knippen en plakken, en de resulterende afbeeldingen afdrukken)? Is er een manier om een web browser die ik gebruik (Firefox, Chrome, Safari, IE, of Opera) te vertellen: “druk deze pagina af zoals u hem zou weergeven in een willekeurig hoog browservenster”?

(PS: zie ook: Print From Browser Using Screen CSS ?)

Antwoorden (8)

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

Chrome heeft deze functie ingebouwd in de Developer Tools, maar op een zeer onduidelijke plaats.

  • Open de Developer Tools (Windows: F12 of Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Klik op de hamburger-menuknop Customize and control DevTools en kies More tools > Rendering settings (of Rendering in nieuwere versies).
  • Schakel het selectievakje Emuleren van afdrukmedia in op het tabblad Rendering en selecteer het mediatype Screen.

Voornamelijk uit dit antwoord geciteerd. Zie hieronder voor het verschil.

Als je nu afdrukt, zal de afdruk precies zijn wat je ziet. Zorg ervoor dat je de ontwikkelgereedschappen open houdt totdat je afdrukt. Zodra u de ontwikkelgereedschappen sluit, wordt de rendering-instelling weer op normaal gezet.

Noot: Inspiratie voor dit antwoord kwam van https://superuser.com/a/568847/176146 . Maar de eigenlijke tekst van dit antwoord is van lmeurs antwoord . Het is bijna precies hetzelfde, maar wij proberen precies het tegenovergestelde te doen van hun antwoord, dus in plaats van de overschrijving in te stellen op Print wordt deze ingesteld op Screen.

23
23
23
2014-11-28 12:59:05 +0000

Waarom worden mijn webpagina’s niet afgedrukt zoals ik in mijn browser zie?

De reden waarom sommige van uw webpagina’s anders worden afgedrukt, is omdat zij een afdrukstijlenblad hebben.

  • *

Wat is een afdrukstijlenblad?

Een afdrukstijlblad formatteert een webpagina zo, dat hij bij het afdrukken automatisch in een gebruikersvriendelijk formaat wordt afgedrukt. Print stylesheets bestaan al een aantal jaren en er is veel over geschreven. Toch zijn er maar weinig websites die ze implementeren, wat betekent dat we met webpagina’s blijven zitten die frustrerend genoeg niet goed op papier worden afgedrukt.

Het is opmerkelijk dat zo weinig websites print stylesheets gebruiken als:

  • Afdrukstijlenheets verbeteren de bruikbaarheid enorm, vooral voor pagina’s met veel inhoud (zoals deze!)
  • Ze zijn fenomenaal snel en gemakkelijk op te zetten

Sommige websites bieden wel een link naar een afdrukvriendelijke versie van de pagina, maar die moet natuurlijk worden opgezet en onderhouden. Ook moeten gebruikers deze link op het scherm opmerken en dan gebruiken vóór de gewone manier waarop ze pagina’s afdrukken (bv. door de printknop boven in het scherm te selecteren). Printvriendelijke versies zijn echter handig wanneer een aantal webpagina’s tegelijk worden afgedrukt, zoals een artikel dat zich uitstrekt over meerdere webpagina’s.

Bron Schakel Print Stylesheets (CSS) uit bij het afdrukken van een website

  • *

Hoe schakel ik een Print Stylesheet uit?

Onlangs moest ik een snapshot van een website maken, precies zoals die op mijn scherm te zien is. Dat wil zeggen, ik wilde de achtergrondkleur, ik wilde de advertenties, ik wilde de volledige lay-out.

Een optie is om opeenvolgende screenshots te maken terwijl je door de pagina scrollt, en die dan in Photoshop weer aan elkaar te plakken. Dat kost veel tijd en je houdt een lage-resolutie (72 dpi) afbeelding over.

Een andere manier om dit te doen is om de pagina af te drukken, en dan “op te slaan als” een PDF in plaats van hem af te drukken. Dit werkt heel goed voor pagina’s die geen verschillende opmaak hebben voor het afdrukken van een pagina versus het bekijken van de pagina.

Helaas voor mij wordt het steeds populairder om een “print” stylesheet op een website te zetten, die nieuwe paginastijlen definieert als een gebruiker de website probeert af te drukken. Dit wordt gedefinieerd in de header en ziet er ongeveer zo uit:

Ik heb maar één optie gevonden die echt aan mijn behoeften voldoet: De “Web Developer” add-on / extensie ontwikkeld door Chris Pederick ](http://chrispederick.com/work/web-developer/)

Met deze plugin kun je heel gemakkelijk ALLE stijlen, Standaard stijlen, inline stijlen, ingesloten stijlen, en, je raadt het al, afdruk stijlen uitschakelen!

Het is momenteel beschikbaar voor Firefox en Chrome. Ik hoop echt dat er ooit een Safari-extensie komt, want ik gebruik voornamelijk Safari. De enige optie die ik voor Safari heb gevonden is om ALLE stijlen uit te schakelen - een functie die standaard wordt geleverd met de nieuwste versie (5.0.3) van de browser. Dit is nuttig tijdens de ontwikkeling om te zien hoe je site zal worden bekeken op een text-only browser, maar zonder de mogelijkheid om te selecteren welke stijlen je uitschakelt heeft het maar beperkt nut.

Hier is een voorbeeld van het uitschakelen van afdrukstijlen met de bovenstaande extensie in Firefox:

Bron Print stylesheet - the definitive guide

9
9
9
2017-05-09 13:01:26 +0000

Een oplossing zonder plug-in voor Firefox: Open Web Developer Tools, in Default Developer Tools (tandwielpictogram) vink “Maak een screenshot van de hele pagina.” Je hoeft dit maar één keer te doen.

Dan in Developer Tools, klik op het camera icoontje. De hele pagina wordt opgeslagen als een .png. Van hieruit kun je het afdrukken, omzetten naar pdf, enz.

8
8
8
2014-12-02 07:29:40 +0000

Ik gebruik de Chrome extensie: Webpagina screenshot . Met twee klikken is de complete webpagina omgezet naar jpg of pdf. Je hoeft de screenshots niet meer zelf aan elkaar te lijmen. Deze pagina ziet er als volgt uit:

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

Ik werd ook geconfronteerd met het soortgelijke probleem. Momenteel gebruik ik Print Friendly and PDF Extenstion for Chrome .

Beste eigenschap is dat ik handmatig de items kan verwijderen die ik niet in mijn Print/PDF wil.

1
1
1
2016-10-27 18:42:56 +0000

(Op het gevaar af dat dit een reeks Software Aanbevelingen antwoorden wordt, maar tot nu toe lijkt installeer en gebruik browserextensie X het enige antwoord te zijn dat echt werkt:)

De laatste tijd gebruik ik de Open Screenshot Chrome extensie voor dit doel, en ik ben er erg blij mee. Het had geen problemen met een lange Quora pagina .

_Update (november, 2017): dit is niet langer de beste optie: Firefox en Chrome ondersteunen nu het maken van screenshots op volledige pagina’s in hun Developer Tools _.

1
1
1
2019-03-14 12:26:08 +0000

Vandaag kan dit in Firefox (ik gebruik 65.0.2 op dit moment) als volgt:

  1. Druk op F12. Het paneel Gereedschap voor ontwikkelaars verschijnt.
  2. In de rechterbovenhoek staat een camerapictogram. Om een screenshot van de hele pagina te maken, klikt u erop.

In Instellingen (om die te openen, klik je op de drie puntjes rechts van het camerapictogram), kun je het gedrag van de camera enigszins aanpassen; standaard wordt de schermafbeelding opgeslagen in je Firefox-downloadmap.

Als het camerapictogram ontbreekt, moet u het eerst inschakelen in Instellingen.

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

Hier is er nog een, genaamd OpenScreenShoot . Ik hou ervan omdat het Open source is, beschikbaar op GitHub, en het werkte voor mij voor een zeer lange webpagina waarop, andere alternatieven zoals WebpageScreenShot faalden.