Save your PDF in three steps

Open the viewer and paste HTML, or use Open to select a file.
Choose Preview or Both on a small screen. In the preview toolbar, select Download → PDF.
In your browser’s print dialog, choose Save as PDF where available. Check paper size, margins and page breaks, then save.

PDF export uses the current editor source. If you paused Live preview, the PDF can include edits that the on-screen preview has not shown yet.

Try a printable invoice

This example uses system fonts and no external images. Open it, change an item, then export it. The PDF uses A4 paper with 16 mm margins.

Open this example in the viewer →

View the HTML and CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sample invoice</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 24px; color: #202020;
      background: #fff; font: 16px/1.5 system-ui, sans-serif; }
    main { max-width: 640px; margin: auto; }
    h1 { margin: 0; font-size: 32px; letter-spacing: -.04em; }
    p { margin: 4px 0 24px; color: #555; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 12px 0; border-bottom: 1px solid #ddd;
      text-align: left; }
    th:last-child, td:last-child { text-align: right; }
    tfoot { font-weight: 700; }
    @page { size: A4; margin: 16mm; }
    @media print {
      body { padding: 0; }
      main { max-width: none; }
      tr { break-inside: avoid; }
      h1 { break-after: avoid; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Sample invoice</h1>
    <p>North Studio · Invoice 001</p>
    <table aria-label="Invoice items">
      <thead><tr><th>Item</th><th>Amount</th></tr></thead>
      <tbody>
        <tr><td>Design work</td><td>$240</td></tr>
        <tr><td>HTML layout</td><td>$160</td></tr>
      </tbody>
      <tfoot><tr><td>Total</td><td>$400</td></tr></tfoot>
    </table>
  </main>
</body>
</html>

Open this example in the viewer →

Set margins and page breaks

@page sets the paper size and margins. Use @media print for changes that should appear only in the PDF, such as hiding a navigation bar or removing screen padding.

In the example, break-inside: avoid asks the browser to keep each table row together. A row taller than a sheet still needs to split. For a section that must start on another sheet, use break-before: page.

Fix a PDF that looks wrong

Content cut off: remove fixed heights and overflow: hidden from printable sections. Make wide tables fit, or try landscape paper.
Extra space or blank pages: check fixed widths, large margins and forced page breaks. Avoid giving every section a full viewport height.
Missing background colors: enable background graphics in the print dialog if your browser offers it. CSS print-color-adjust: exact is a request; the user’s print settings can override it.
URLs, dates or page numbers: turn off browser headers and footers in the print settings where available.
Missing images or styles: embed them in the document or use reachable HTTPS URLs. A local HTML file does not give the viewer access to its companion folders. See the file-opening guide.

PDF or PNG?

Choose PDF for printable pages and reports; browser-rendered text usually remains selectable. Choose PNG for an image of the screen layout. A PNG is a flat picture, with no clickable links or selectable text.

The PDF is rendered from a fresh copy of your HTML, so it does not preserve form entries or interactions made inside the preview. Print options also vary by browser and device. On iPhone or iPad, follow the print/share sheet to save a PDF if that option is available.

The viewer does not upload your HTML to our server to make the PDF. Images, fonts or scripts referenced by your document can still contact their own servers.

Browser references

See MDN’s printing guide, page-break behavior and print color settings for the CSS used here.