The document is wrong
Links in the PDF are not clickable
URLs appear as blue underlined text and clicking them does nothing. Sometimes the text is the URL itself, sometimes it is link text with no destination anywhere.
What is actually happening
Either the markup styles something to look like a link without being an anchor, or the anchor href is relative. A relative href has no meaning once the document leaves your origin, so there is nothing for the viewer to resolve.
Confirming it is this and not something that looks like it
Search the HTML for href=. Any value that does not start with a scheme cannot survive as a link.
The fix
Use real anchor elements with absolute URLs including the scheme. For links whose text is not the URL, consider printing the destination alongside it, since a printed copy loses the link entirely and the reader has nowhere to go.
/* Keep the link live for the on-screen PDF, and readable on paper. */
.document a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
word-break: break-all;
}
/* Not on links whose text is already the URL. */
.document a.bare::after {
content: none;
}If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- A span or button styled as a link, with no href to make live
- mailto: and tel: links, which are valid and often stripped by an over-eager sanitiser
- Anchors inside an element with pointer-events: none, which some viewers honour
- Internal anchors to an id that the paged document renumbered
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. Either the markup styles something to look like a link without being an anchor, or the anchor href is relative. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Background colours and images are missing from the PDF
Browsers drop backgrounds when printing, because a page with every background painted would empty a toner cartridge, and most render APIs inherit that default.
The generated PDF is blank
Almost always one of three things: the content is rendered by JavaScript that had not run when the snapshot was taken, the body has no height because everything inside it is absolutely positioned or floated, or the markup you sent was empty because the template call returned before the data arrived..
Images do not appear in the PDF
The image src is a path rather than a URL.
The PDF ignores my CSS
The stylesheet is linked rather than embedded, and the link points somewhere the renderer cannot reach: a bundler-generated path, a digested asset filename, or a URL behind your application's authentication.
Content rendered by JavaScript is missing from the PDF
The snapshot was taken before the script finished.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.