How can I capture or print the whole scrolling area of this dynamic webpage?

website javascript screen-capture webpage capture

21,570

You can do it using combination of some Firefox add-ons:

Aardvark, AND
Firebug or Stylish, AND
ScreenGrab or some PDF printer plugin or hardware printer.

Aardvark & Firebug are enough if you have physical printer.

Steps:

Install Firefox, current version is 7.
Open about:config page, and add boolean setting extensions.checkCompatibility.7.0 = false.
Install the extensions, restart Firefox.
Load page and do whatever you want to make it look like you want it printed.
Start Aardvark (you should have right-click context menu entry to do so). Click anywhere in the table and then keep pressing w (wider) until you have situation like on screenshot (you have Aardvark help on h. Narrower is n, quit Aardvark = q). Then click i (isolate).
Open Firebug (yoy should have button in bottom right or top right of the browser). Select <body> node and change overflow from hidden to auto.
Open print preview > page setup > options and tick "print background colors and images".

21,570

Martin

Updated on September 18, 2022

Comments

Martin over 1 year

I'm trying to save (as in: for printing / putting it in a PDF -- I'm not interested in the HTML, but in the rendering of the html to be able to print the table or at least view it offline) a table view from this car site:

http://cc.volkswagen.at/nwapp/nws/ICC3/LNF!de!!!L!!!/?MGN=220&AUVN=&rel=statBanner_Konfigurator&rel=statCc_Caddy

It's german, but it's not very difficult to navigate, just click on the Vergleichen Sie die Ausstattungen link, and it will display a (very long) table:

I simply have not managed to save this table either via printing the website or saving it. (Tried with IE8 and FF7.) I also tried selecting the table text and doing copy&paste into MS Word -- no luck either.

I also tried the tool DuckCapture, that says it should be able to "Capture a Tall Website" but the tool is unable to scroll the table on this page. (I assume because the table and it's scrollbar are dynamically generated from javascript ...)

How can I save the table as it appears on screen (the whole, scrolled, table)??
Martin over 12 years

"The trick is the change the Page Style in your web browser from Default (or Basic) to "No Style"" -- the problem is, if I change the style to no style ... there is no table anymore! If I disable the style, the information the page is supposed to display is completely lost for me. Do you still see the table with the checkmarks and the green circles if you change to no style??
Radek about 9 years

In my case all I needed to do was to change the overflow property to anything but auto. Then Screengrab worked like a charm