0

There are many questions that have been answered about this kind of issue: How to get a PDF of a webpage that's searchable and has clickable hyperlinks. For example, this discussion.

What I'm addressing is a specific situation: I have vanilla Chrome and am not permitted to install add-ins or other browsers. (I also happen to prefer Chrome because its "Save as PDF" printing option creates clickable links.)

The problem is that some webpages have banners and other elements that overlay the text on the printed pages.

One solution offered in the thread cited above was to use Chrome's developer tools to set CSS rendering to "Screen." That helps a lot in some cases, but I still run into webpages where it doesn't work, and various elements continue to overlap the main text.

I have a solution that I will describe below.

vknowles
  • 155

1 Answers1

2

My answer is kind of brute force and requires a little (not much) knowledge of HTML.

Instead of the rendering setting, I open the Chrome Developer Tools, then use the Select Element button:

enter image description here

I then select the offending element and go back to the Developer panel's HTML display, right-click on the element's HTML opening tag, and choose "Hide element."

enter image description here

I sometimes have to do this for a few elements, but then the Print | "Save as PDF" feature works, and I can see all the body text.

vknowles
  • 155
  • 1
    This works quite nicely! I also found that if you right click on the website and select inspect, directly the element you have right clicked gets selected in the developer tool pane. One question though: If you hide multiple items, how can you unhide them with a single click? – Nenunathel Mar 08 '24 at 13:45
  • 1
    Oh, never mind. You just reload the webpage. – Nenunathel Mar 08 '24 at 13:46