How To Print A Single Element

Published: at 06:10 AM

It’s pretty common to be asked to generated PDFs client-side. For that I like using the native print-to-PDF feature, accessible via the native print dialog one can trigger using window.print()

An example is worth a thousand words

<style>
  @media print {
  body { visibility: hidden; }

  .printable {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

<body>
  <div>
    <div>
      …Deep Nested DOM…
      <button onclick="window.print()">
        Print
      </button>
    </div>
    <div class="printable">
      This will be the only part sent to the print dialog, enjoy!
    </div>
  </div>
</body>