
How to Turn a Claude Artifact Into a PDF
Claude has no export-to-PDF button, and printing from the chat prints the conversation instead. Here's the route that actually produces a clean PDF of the artifact itself.
There's no export-to-PDF button on a Claude artifact, and the obvious workaround fails in a specific, confusing way: pressing Cmd/Ctrl + P while looking at the artifact prints the conversation. You get the chat transcript, your prompts, Claude's prose — and the artifact reduced to a small panel or missing entirely.
That's not a Claude quirk so much as how browsers work. The artifact renders inside a frame within the chat page, and printing acts on the page, not on the frame. So the whole trick is getting the artifact onto a page of its own first. There are three ways to do that, and they suit different artifacts.
Route 1: Publish, then print (works for everything)
The most reliable path, and the only one that handles React artifacts without extra work.
- Get the artifact onto its own URL. Either use Claude's Publish button, or copy the artifact's code and paste it onto a link. Both give you a page containing the artifact and nothing else.
- Open that URL in a normal browser tab.
- Print to PDF — Cmd/Ctrl + P, then "Save as PDF" as the destination.
Because the artifact is now the whole page, the PDF is the artifact — no chat, no sidebar, no prompt history.
Two settings are worth a glance in the print dialog before saving. Background graphics is off by default in Chrome, which silently strips every coloured header, tinted table row, and card background; a dashboard printed without it comes out as black text on white and looks broken. And Scale set to "Fit to page width" rescues a wide table that would otherwise be sliced down the middle.
If the artifact is genuinely private, use the paste route rather than Claude's Publish — you can put a password on the page, and you're not left with a public link you'd then have to unpublish permanently.
Route 2: Download, then print (HTML artifacts only)
If Claude produced a self-contained HTML artifact, you can skip hosting entirely:
- Download the artifact — you'll get a
.htmlfile. - Double-click it to open in your browser.
- Print to PDF as above.
Same result, nothing leaves your machine. The catch is that this only works when the download is actually openable, which rules out React artifacts — they download as .tsx source that a browser can't run. Which type you have, and why, is covered in how to download a Claude artifact.
Route 3: Ask Claude to make it printable first
Worth doing when the PDF is the deliverable rather than an afterthought — a report going to a client, a one-pager, an invoice.
Ask for it directly: "Add print styles so this prints cleanly on A4 — hide the navigation and buttons, avoid page breaks inside cards, and make sure the tables fit the page width." Claude will add a @media print block, and the difference is substantial. Interactive controls that mean nothing on paper disappear, and content stops breaking across pages mid-card.
This is the step that turns "a screenshot of a webpage" into something that looks designed for print, and it costs one more prompt.
If the artifact is a Markdown document
A Markdown artifact isn't a webpage yet, so there's nothing to print until it's rendered. Downloading gives you a .md file that opens as plain text with the # symbols visible.
Render it first — the Markdown to PDF converter takes the Markdown and produces the PDF in one step, no hosting in between.
How do I download a Claude artifact as a PDF?
You can't, in one step — and this is the question behind most of the confusion, so it's worth stating plainly. Claude's download control saves the artifact's source: .html for a webpage, .md for a document, .tsx for a React component. There is no PDF option in that menu, and there is no export-to-PDF anywhere else in the artifact panel. See what each artifact type downloads as if you're not sure which one you have.
The download-shaped route to a PDF is therefore two steps, and it only works for self-contained HTML artifacts:
- Download the
.htmlfile and double-click it. It opens in your browser as a page of its own — which is the property that was missing inside the chat. - Print it, and choose Save as PDF as the destination.
For a React artifact the downloaded file won't open at all, so skip the download and use Route 1 above: put it on a link first, then print that page. Same two steps, one of them done for you.
What about screenshotting it?
It works, and for a small chart it's genuinely fine. For anything longer than the visible panel it isn't: you get one screen's worth, at screen resolution, with text that's an image rather than text — not selectable, not searchable, and blurry when printed. If the PDF is for anyone other than you, print properly.
Quick reference
| What you have | Fastest route |
|---|---|
| Self-contained HTML artifact | Download → open → print to PDF |
| React artifact | Put it on a link → open → print to PDF |
| Markdown artifact | Markdown to PDF |
| Anything going to a client | Ask Claude for print styles first, then print |
Bottom line: the artifact has to be on a page of its own before printing works — that's the whole problem, and publishing or downloading both solve it. Turn on background graphics in the print dialog, and if the PDF matters, spend one extra prompt asking Claude for print styles.
更多文章

Why Your JavaScript Works Locally but Not on the Published Page (and What Does Work)
Published dochost pages run their own scripts — storage, dialogs, downloads, clipboard, fetch all work. When a page looks fine but a button does nothing, it is almost always one of six things. A checklist, with a live test page you can compare against.

How to Claim a yourname.dochost.co Subdomain
Pro and Max accounts can serve every page from a short branded address like acme.dochost.co instead of dochost.co/d. Here is how to claim one, what happens to old links, and why renaming needs a second click.

Turn Any AI Output Into a Shareable Link
Every AI tool leaves you with output trapped in a chat window. Here's the neutral step that turns it into one clean link for your team or client.
邮件列表
加入我们的社区
订阅邮件列表,及时获取最新消息和更新