How to save a web page as a PDF with clickable links and bookmarksChrome vs. Adobe Acrobat vs. Page Scanner

A 40-page PDF of a documentation page is a chore to read if the table of contents does nothing when you click it and the viewer's sidebar is empty. Two things fix that. Links: the page's links stay clickable in the PDF, and an in-page link, such as a table of contents entry, jumps to the right sheet. Bookmarks: the PDF carries an outline, the list in the viewer's sidebar, built from the page's headings and nested the way they are.

Whether you get either depends on the tool, and not every tool says. Here is what three of them document, and a two-minute way to check any PDF you already have.

Three tools at a glance

✓ yes, ✗ no. An empty cell is one the product's own documentation does not answer.

Chrome's print dialog

Press Ctrl+P on Windows and Linux or ⌘+P on a Mac, choose Save as PDF as the destination, and save. Google's help page for printing from Chrome covers exactly that: open the page, open the print window, "select the destination and change your preferred print settings." It says nothing about links or an outline in the file, so the table leaves those cells empty rather than guess.

There is one place Google does document an outline. The Chrome DevTools Protocol, which scripts use to drive Chrome, lists two options on its print-to-PDF command: generateDocumentOutline, "Whether or not to embed the document outline into the PDF", and generateTaggedPDF, for an accessible tagged PDF. Both are marked experimental, and they belong to the protocol, not the dialog. If you print from a script, see how to capture a web page from the command line.

What the dialog does have going for it is the price: nothing, and it is already installed. For what else it keeps and drops, see how to save a web page as a PDF.

Verdict: try it first, then check the file with the steps below. Google makes no promise either way about links or bookmarks.

Adobe Acrobat

Acrobat treats a web page as something to convert, and it documents both links and bookmarks. On the desktop, Create, then Web page, takes a URL or an HTML file; Capture multiple levels follows links to a depth you set, or the whole site, with Stay on same path and Stay on same server to fence it in. Adobe notes that its browser extension converts the open page too, while the desktop app "provides more control".

The conversion settings carry the two options this post is about. Create bookmarks adds "bookmarks in the PDF using web page titles or URLs", and Create PDF tags preserves "the HTML structure in the PDF for easier navigation and accessibility". Adobe's page on converted web pages fills in the detail. You get a bookmark for the web server at the top, and under it "a tagged bookmark for each web page downloaded", named from the page's title. They start "all at the same level", and you can nest them yourself. With tags on, you can then add tagged bookmarks "for paragraphs and other items that have HTML elements". Links are live in a particular way: "Depending on how you configured Acrobat, clicking a link on a converted web page adds the page for that link to the end of the PDF, if it isn't already included."

There are layout settings as well: Underline Links, Expand Scrollable Blocks, page size and orientation, and Scale Wide Contents to fit page. Adobe also reminds you that one web page can become several PDF pages.

Verdict: the tool for converting a site, several pages deep, into one PDF you keep working on in Acrobat. Its bookmarks are one per page out of the box, and heading-level ones are a step you take in Acrobat afterwards. It is part of an Acrobat subscription.

Page Scanner

I build Page Scanner. It captures the page in your own Chrome, lays it out once at its full height, and has Chrome's print pipeline render that layout, so the PDF looks like the screen and its text is text. Links and bookmarks are both automatic, with no setting.

Links. The print Page Scanner gets from Chrome marks every link it draws. The export draws the page onto its sheets as a form, and a form does not carry those marks, so Page Scanner reads them from the capture and writes them again on each output sheet, moved through your crop and the page breaks the way the artwork is. A link to another page opens it. An in-page link, a table of contents entry for instance, jumps to the sheet and the height its target landed on. A link that crosses a page break becomes a box on each sheet it spans.

Bookmarks. The capture reads every visible h1 to h6 with its position, from the same layout the PDF is printed from. The export keeps the headings inside your crop, nests them the way the page does (an h3 under the h2 before it), and points each at its sheet, a few points above the heading. Headings in a nav, an aside or a footer, or in a sticky or fixed box, are left out, so a documentation page's "On this page" rail does not become the first bookmark. Titles are Unicode, so a Korean or Japanese heading stays in its script. Scan several tabs into one document and each tab gets a bookmark of its own, with its headings under it.

What it does not do, from its own list of limits:

• Links are kept for http, https, mailto, tel and ftp only; a javascript: link is dropped, and a click handler on a div was never a link to begin with.
• An in-page link whose target is outside the crop, or in a band you cut out, is left out rather than jumping nowhere.
• A link or a heading under a blur, a redaction or an erase is left out, because its address or its title can give away what the mark hides.
• Only real h1 to h6 elements become bookmarks. An element with only role="heading", or a div styled as a heading, does not. A heading made of an image has no text to use. Titles stop at 160 characters, and at most 500 headings are kept.
• A PNG or a JPEG has neither links nor bookmarks.
• A raster capture, taken when Chrome's debugger cannot attach (most often because DevTools is open on the tab), has no print to read links from, so its PDF has none. Close DevTools and scan again to get the vector capture.
• A PDF you open from disk and export again loses its links.

Verdict: the one for a single long page, or a handful of tabs, when you want the PDF to look like the screen and open with an outline of the page's own headings.

How to check the PDF you got

1. Open it in your PDF viewer and show its sidebar of bookmarks, which some viewers call the outline. An empty one means the file has no bookmarks.
2. Click a link to another site. It should open in your browser.
3. Click an entry in the page's own table of contents. It should jump down the PDF.
4. Select a paragraph and copy it. If you cannot, the PDF holds a picture of the page rather than its text.

Which should you use?

Use Chrome's print dialog if the page is short, its print layout is fine, and a quick check shows the links survived.

Use Adobe Acrobat if you need a site, not a page, several levels deep, or you want tagged structure to work with in Acrobat.

Use Page Scanner if you want one page, or a few tabs, as a PDF that looks like the screen, with its links clickable and its headings in the sidebar, cropped or marked up first.

Frequently asked questions

Why does my PDF have no bookmarks even though the page has headings? In Page Scanner, the likely causes are that the headings are divs styled to look like headings, that they sit in a sticky sidebar, or that your crop leaves them out. The file only has bookmarks when the page uses h1 to h6.

Do links survive on A4 or Letter pages? In Page Scanner's PDF, yes, on any paper size; a link split by a page break is clickable on both sheets. Acrobat documents its own page size and scaling settings.

Why did an in-page link disappear? Its target was outside the crop or in a cut band, so there was nowhere in the file for it to jump to.

Where this comes from

• Google: Print from Chrome in Chrome Help, and Page.printToPDF in the Chrome DevTools Protocol.
• Adobe: Convert web pages to PDFs, Web page conversion settings and PDFs converted to web pages.
• Page Scanner: links and bookmarks in the export guide, vector or raster, and the FAQ.