Is there a way to remove the header and footer that Facebook adds when I save a page as a PDF (from Chrome on a Mac)?

Question

Is there a way to remove the header and footer that FB adds when I save a page as a PDF (from Chrome on a Mac)?

When I ask Facebook to give me an archive of some of my previous posts, I gives me results that link to an archive page, something like this:

https://www.facebook.com/[magicnumber_redacted]/allactivity/?category_key=YOURTIMELINEPOSTS&entry_point=ayi_hub&year=2021&month=4

which shows thumbnails and 2- to 3-line snippets of all my timeline posts for April 2021. That's really pretty useful for searching. But unfortunately, that page is not searchable. On a Mac, using Cmd+F will only search the framework of the page that has the date text, the displayed snippets of the post contents are not searchable. Cmd+A, Cmd+V will copy the framework text, but not the snippets. If I save it as HTML and reload the saved file, same problem is there. I'm not enough of an HTML guru to figure out how to automate restructuring of the pages.

However, I can save the page a PDF and then the full displayed text is searchable. That's what I want. Yay! BUT there is a glitch. FB adds headers and footers to every PDF page that cover over part of the text of the first and last snippet on each. The text is there, hidden. If I search the PDF for text that I know is hidden, Acrobat highlights the area where the text should be, underneath the large colored header or footer bar.

So is there a way to get FB to not insert page headers and footers when the web page is saved as PDF? I can save PDFs of other web pages without this kind of problem.

Thanks.

Answer 1

If there are no print css styles in the web page or a special 'print' or
'print version' or 'offline reading' button then it will always be not
easy to print a web page.

Then you will have to find workarounds:

• delete html nodes
• change css styles ...

Delete html nodes:

You can delete nodes from the html DOM.
Open the developer tools.
(Shortcut on a Mac: Open Developer Tools ⌘ + Option + i)

Then go to the 'Elements' - Tab, there you can see the DOM.
Moving the mouse over the html elements in the elements window
will higlight the corresponding parts of the html page.

If you move the mouse over some part of the html page and
click with the right mouse button and select 'Inspect' will select
a html element in the 'Elements' window.

If you have selected a node with 'Inspect' then move the mouse
(without clicking) in the elements windows upwards.
You will see that the selection in the html page will extend.

Then go further upwards until the whole part of the html page
you want to be deleted will be selected.
If you are on the outmost html element that corresponds to the parts
to be deleted then click the right mouse button
(in the 'Elements' window) and select 'delete element'.

Most of the time this will be a element or a element.
But it will not always work. It depends on how dynamic the web page is
and how the page is composed (html, css js etc.).

Sometimes it goes wrong and the remaining parts of the page
will be moved or collapsed or you did delete too much.

Then you can refresh the page and start again.

Sometimes e.g. you want to delete a whole sidebar or a footer.
You might find html elements or css style classes called alike.

Changing styles:

You find the styles in the 'Styles' tab.

Sometimes the text content part is in a column that is too narrow.
Try to select the whole column.
Then look a the styles. Maybe you find a size or a percentage.
Click on the value and increase it.

Sometimes a page is build with bootstrap.
If you delete left and right columns to have only the content in the middle,
that part might still not extend to the right.

Then it could be that the bootstrap class restricts the width e.g. to 4 or 6
columns of the whole page layout (maybe a 12 column layout).

The bootstrap class might be 'col-md-6'.
Then you could change this class to e.g. 'col-md-10'
so that the whole div can fill a 10 columns space.

Good luck !

Answer 2

I had erroneously thought that it was Facebook that put the header on every page, and wrote my question that way. That's mistaken.

After much experimenting, it seems that when Facebook serves a page, it provides fixed header information and scrolling page data. Then it is up to the browser to put those together, for display or when you ask the browser to print the page, including save it to PDF.

So the answer to the question is:

It's not Facebook adding the header to the printed page or PDF, it's the browser, and the solution is to use Safari instead of Chrome for these kinds of pages.

Chrome appears to have the design decision that it will print the header on every page. On Facebook, that includes both the menu at the left and the links at the top of the page. But Chrome does not allow room for that on each printed page, with the result that some of the scrolled page data is masked or eclipsed. The same is true for Chrome-like browsers like Opera.

But Safari made a different design decision, they only print the header on one page. It turns out that it's not always the first page, it's the page you are looking at. If you have scrolled to the bottom of a long Facebook page in Safari and then print it, or save it to PDF, Safari will put the header info on the last or next-to-last page, depending on how the pages break. But it won't allow room for the header there, so there will be data that is eclipsed or masked.

But Safari does allow room for the header on the first page, so if you scroll to the top before printing, the header will be on the first page only, and there will be room allowed, and the print or PDF will be reasonably formatted with no data eclipsed or masked.