Clickable links and a table of contents in HTML to PDF

A PDF made from HTML can keep its links. We converted a short handbook with a table of contents, a web link, an email link and a URL written as plain text, then inspected the links inside the PDF.

What stays clickable

Some PDF readers guess links from text that looks like a web address, but you can’t rely on that. Wrap every address in an <a> tag.

A table of contents that jumps to each section

<nav>
  <h2>Contents</h2>
  <ol>
    <li><a href="#leave">Annual leave</a></li>
    <li><a href="#expenses">Expenses</a></li>
    <li><a href="#security">IT security</a></li>
  </ol>
</nav>

<section id="leave">
  <h2>Annual leave</h2>
  …
</section>

Each link’s # target must match an id exactly. In our test all four contents links became working jumps to the right pages.

Page numbers in the contents: not supported

Print tools that support target-counter() can print “page 7” next to each entry. The converter’s Chromium engine doesn’t: when we tried it, the whole generated label was left out. Keep the contents as links, or type the numbers once the layout is final.

No bookmarks sidebar

PDF readers can show a bookmarks or outline panel. PDFs from this converter don’t include one; our test file had none, even with headings. Readers can still use your linked contents page and the reader’s search.

Show the address on paper

A clickable link is useless once printed. This print rule writes the address after each external link, and worked in our test:

@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

Links in converted webpages

When you convert a public URL, links on the page are kept the same way. In-page links only work if their target is in the same document.