How to store web page snapshots as PDF in Zotero

When I create references to web pages in Zotero, I like to create snapshots of those pages to ensure perpetual access. However, some sites are notoriously problematic to snapshot because they make heavy use of JavaScript or are behind some kind of paywall.

The other day I came across a comment in the Zotero forum that hints at a setup for taking semi-automatic PDF snapshots of web pages. Unfortunately, this feature is not integrated in plain Zotero but with just two add-ons, we can mostly automate it.

Install and Configure Add-ons

The workflow depends on two Zotero add-ons, Zotfile and Zutilo. Zotfile provides a feature to attach a directory’s newest file to an item, so that we won’t have to select it manually. Zutilo allows us to create a keyboard shortcut for this feature, further simplifying the workflow.

Install Zotfile

The installation of Zotfile is well documented and describes configuration of the folder from which to choose files to add.

Configuration of Zotfile directory

I like to use a temporary folder for this workflow, as the PDF will be copied into a Zotero folder automatically and I prefer to keep my directories clean of unused files.

Install Zutilo

Zutilo’s installation is also well documented.

Afterwards we can configure a shortcut for Zotfile’s Attach new file functionality. For this, we go to Tools -> Zutilo Preferences -> Shortcuts -> Attach new file and select a memorable shortcut. In case of conflicts with existing shortcuts, Zutilo will tell us.

Configuration of Zutilo shortcut

I chose CTRL + P to attach the new file which gives me a nice memory hook after pressing CTRL + P in the browser to save as PDF right before.

The workflow to take PDF snapshots of web pages

With the required add-ons installed, we can now take a look at the workflow.

1) Print the web page to PDF

The first step is to create a PDF version of the web page. This is easily done by pressing CTRL + P and choosing Save as PDF. Be sure to save the PDF into the same folder that you configured for Zotfile above.

2) Create a new item for the web page in Zotero

With the Zotero Connector installed, creating a new item from the browser is as easy as pressing CTRL + Shift + S (Firefox users go here).

3) Attach the PDF to that new item

Now we switch over to Zotero where we probably want to complete the new item’s records anyways. With a quick call to our Zutilo shortcut, CTRL + P in my case, we can add that PDF snapshot to the item.

Tips and tricks

Replace HTML snapshots with PDF snapshots

If you want to replace HTML snapshots with PDF snapshots altogether, you can disable HTML snapshots in Zotero. Go to Edit -> Preferences -> Advanced -> General -> Config Editor and type snapshot into the search bar. It should find a preference called extensions.zotero.automaticSnapshots that you can set to false by double clicking.

Disable HTML snapshots in Zotero

Reduce junk in PDFs

Many websites have footers with related content or long lists of comments. To keep that stuff out of the printed PDF, I like to limit the pages printed.

Remove overlay artefacts from PDFs

Sometimes you can see visible fragments from JavaScript overlays in print preview. If that is the case, you can use the developer console to remove relevant elements from the page’s DOM and get a clean print.