How to turn HTML from ChatGPT canvas into a clean PDF

Updated: 2026-10-14 · Dawwerni team

Copy the HTML from ChatGPT canvas into a file saved as page.html and open it in your browser. Then export with a converter that waits for the Tailwind CDN and charts, freezes animations, keeps dark backgrounds and pins full-screen sections, or print it with Ctrl+P after adding a short @media print block. Choose “Print” for selectable text.

Step 1: get the HTML out of ChatGPT canvas

ChatGPT’s canvas can write a complete web page: a report, a dashboard, a CV or a landing page. What you need for a PDF is that code as a real .html file on your computer. The same applies to pages made in Gemini’s Canvas or as an HTML artifact in Claude.

1. In the canvas, use the copy option to copy the code, or the download option if it is offered.
2. If you copied it, paste it into a plain text editor (Notepad on Windows; TextEdit on Mac after Format → Make Plain Text) and save it as page.html in UTF-8.
3. Double-click page.html. It should open in your browser and look like the canvas preview.
4. If the code is a React component instead of a page, ask: “Give me this as one self-contained HTML file I can open in a browser.”

Why the PDF looks different from the preview

AI-generated pages are built for the screen. They load styles and libraries from CDNs at runtime, animate things into view and size sections to the window. A PDF is a fixed, paged snapshot, so five things go wrong again and again. Our free converter for AI-generated HTML has a fix for each of them, and you can also fix them in the code.

The Tailwind CDN has not finished styling the page

Many AI pages use the Tailwind Play CDN script, which generates the CSS in the browser after the page loads. Capture too early and you get unstyled text. The fix is simply to wait a few seconds before capturing or printing. For more on Tailwind, read export a Tailwind page to PDF.

Charts are captured mid-animation

Chart.js and similar libraries animate bars and lines from zero. A screenshot taken during that half second shows empty or half-drawn charts. Wait longer, or turn animations off (code below).

The dark theme turns white

Browsers drop background colours when printing unless “Background graphics” is ticked, so a dark dashboard becomes light grey text on white. print-color-adjust: exact or the background option keeps it.

The 100vh hero eats a whole page

Sections sized with 100vh (h-screen in Tailwind) depend on the window height. On paper they can fill a full page with mostly empty space, or be cut. Pin them to the page height or set them to auto height for print.

Fixed headers repeat and scroll-reveal content is invisible

A position: fixed navigation bar can print on every page in Chrome, covering text. Content that fades in on scroll stays invisible because nobody scrolled. Show headers once and force the hidden content to appear.

Check the images, fonts and data the page needs

An AI-generated page often depends on files that are not inside it. Before exporting, open it in your browser and look for broken image icons, fallback fonts or empty panels. Each has a different cause.

• Images referenced by a file name that does not exist on your computer (for example logo.png): the AI invented a path. Replace it with a real image, or put your images next to page.html in a .zip and keep the relative paths.
• Images linked from other websites: they appear when you open the page, and in Print, but servers that do not send CORS headers block them in screenshot-based exports such as Download PDF, PPTX and PNG.
• Google Fonts and CDN libraries: your browser downloads them when the page opens, so you need an internet connection during the conversion.
• Data loaded with fetch() from an API: if the API refuses requests from a local file, the panel stays empty. Ask the AI to put sample data directly in the page.

Recommended settings by type of page

These starting points work for most pages generated by an AI. If something is still missing, raise the wait time first.

Step 2: convert it in your browser

The free AI HTML converter runs entirely in your browser: the file is opened in a sandboxed frame and is never uploaded, with no sign-up and no watermark. It exports to PDF, PowerPoint, PNG/JPG, Word and Markdown from the same screen.

1. Drop page.html, paste the code, or drop a .zip if the page uses local images or fonts.
2. Choose the page size and orientation from the table above.
3. Set “wait N seconds” to 3 or more for pages using the Tailwind CDN or Chart.js.
4. Leave the fixes on: animations frozen at their end state, scroll-reveal content shown, fixed headers shown once, 100vh sections pinned to the page height, dark backgrounds kept.
5. Click “Print / Save as PDF” for real text, or “Download PDF” for a pixel-faithful copy where the text is an image.

Step 3 (optional): ask the AI to add print CSS

If you will print the page more than once, fix it at the source. Paste this request into the same ChatGPT conversation (it works the same in other assistants):

Add print styles to this page so it exports cleanly to PDF.
Do not change how it looks on screen.
- an @page rule: A4 portrait, 12 mm margins
- inside @media print:
  - keep background colours (print-color-adjust: exact)
  - hide the navigation bar, buttons and form controls
  - make fixed or sticky elements position: static
  - replace full-screen heights (h-screen, min-h-screen, 100vh) with auto
  - avoid page breaks inside cards, tables, charts and images
  - disable animations and transitions; show scroll-reveal content
- create every chart with animation: false

@page { size: A4; margin: 12mm; }

@media print {
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  nav, button, form { display: none !important; }

  /* fixed / sticky headers: print once, at the top */
  .fixed, .sticky, header { position: static !important; }

  /* full-screen hero sections (Tailwind h-screen, 100vh) */
  .h-screen, .min-h-screen { height: auto !important; min-height: 0 !important; }

  /* keep blocks whole */
  section > *, .card, table, tr, canvas, svg, img { break-inside: avoid; }

  /* no half-finished animations, show scroll-reveal content (AOS) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

• The CSS above is the kind of block you should get back; you can also paste it yourself before the closing </style> tag.
• Tailwind users can do the same with the print: variant, for example class="print:hidden" on the navigation.
• The [data-aos] rule only matters if the page uses the AOS scroll-animation library; other libraries use other attributes.
• Selectors such as header or section > * are deliberately broad; adjust them if they hide or keep together more than you want.

Turn off chart animations

Animated charts are the most common cause of blank areas in an exported PDF. With Chart.js, one line disables animation for every chart on the page:

// once, before creating the charts (Chart.js 3 and 4)
Chart.defaults.animation = false;

// or for a single chart
new Chart(document.getElementById('sales'), {
  type: 'bar',
  data: { labels: ['Q1', 'Q2', 'Q3'], datasets: [{ label: 'Sales', data: [12, 19, 15] }] },
  options: { animation: false }
});

Print or Download PDF: which button?

• Print / Save as PDF uses the browser’s print engine: selectable, searchable text, small files, and your print CSS is applied. Best for documents people will read, search or copy from.
• Download PDF takes screenshot pages: one click, looks exactly like the screen, but the text is not selectable and the file is bigger. Best for dashboards and visual pages.
• Images from other websites that block cross-origin access can be missing in Download PDF but appear in Print.
• Pages that load data from an API that refuses the request, or content behind a login, will not appear in either.

If the result still looks wrong, the full troubleshooting guide is why your HTML to PDF looks broken. For a deck rather than a page, see Claude artifact to PowerPoint, and for the general methods, convert HTML to PDF for free.