UI: Components > PrintPreview

<print-preview> is a custom element that provides a print preview and configuration interface. It allows users to customize paper size, orientation, margins, and font settings before printing.

Important: Text content placed directly in the <body> tag (without being wrapped in a tag) is not supported. Make sure all your text is wrapped in tags like <p> or <div>.

Features

Basic Usage

Add the component to your page and include content within <paper-sheet> elements: 

  <print-preview>
    <paper-sheet>
      <h1>Page 1</h1>
      <p>Content for first page</p>
    </paper-sheet>
    <paper-sheet>
      <h2>Page 2</h2>
      <p>Content for second page</p>
    </paper-sheet>
  </print-preview>

JavaScript API

Control the component programmatically: 

  const printer = document.querySelector('print-preview');

  // Show the print preview dialog
  printer.preview();

  // Print directly
  printer.print();

  // Set content dynamically
  printer.setContent(`
    <paper-sheet>
      <h1>Dynamic Content</h1>
      <p>Generated content here...</p>
    </paper-sheet>
  `);

  // Use templates for dynamic data
  printer.addTemplate('invoice', data => `
    <paper-sheet>
      <h1>Invoice #${data.id}</h1>
      <p>Amount: ${data.amount}</p>
    </paper-sheet>
  `);

  // Set data for template
  printer.setAttribute('use-template', '');
  printer.setAttribute('template', 'invoice');
  printer.data = { id: '12345', amount: '$99.99' };

Internationalization

Add support for additional languages:


  customElements.whenDefined('print-preview').then(() => {
    PrintPreview.i18n = {
      es: {
        bottom: 'Abajo',
        close: 'Cerrar',
        font_family: 'Tipo de letra',
        font_size: 'Tamaño de letra',
        left: 'Izquierda',
        orientation: 'Orientación',
        orientation_landscape: 'Horizontal',
        orientation_portrait: 'Vertical',
        paper_size: 'Tamaño de papel',
        print: 'Imprimir',
        right: 'Derecha',
        top: 'Arriba'
      }
    };
    document.querySelector('print-preview').setAttribute('lang', 'es');
  });

Demo

First, try the system print dialog, by pressing ctrl+p (Windows) or ⌘+p (Mac).
This should print this page.

Next, either click Preview or Print below. The first opens the print-preview where you can adjust settings. If you print from here, you'll only print the content of <print-preview>

Advanced Example

Below is an example of how to use the <print-preview> component with a custom template and JavaScript API. Click the "Show Advanced Example" button to see a demo of:

The example will generate three sample invoices for different customers, each containing various products with quantities and prices. Each invoice will be rendered on its own page with proper layout and calculations.

You can style the template with part-attributes:

<table part="table">

These can then be styled in CSS with ::part:


  print-preview {
    &::part(table) {
      border-collapse: collapse;
      margin-block-start: 4rem;
      width: 100%;
    }
  }

Note: Clicking the "Show Advanced Example" button will replace the content in the preview above with the invoice template demo.

My Printable Content

This content will be printed

Random image

Another Sheet

This is another sheet

And Another Sheet

This is yet another sheet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam laborum quos recusandae accusantium sit incidunt placeat dolorem, porro, eum perferendis commodi. Repudiandae earum quis fugit est a eos eligendi sunt officiis! Odit totam dolores, eligendi possimus itaque nobis dolorum est, ipsum molestiae aperiam repudiandae consequatur odio sint quam facilis placeat ab. Laudantium porro quasi tempora nam iure itaque molestias iusto dolorum alias voluptas placeat ad commodi fugiat odit numquam corrupti odio modi, accusantium officiis earum. Repudiandae, quisquam eius dolorem culpa inventore, maxime quas ullam provident alias aspernatur sit sequi blanditiis temporibus tempore architecto necessitatibus dolor? Corrupti id dolor asperiores laboriosam animi sapiente. Officiis tempora iste commodi fuga consequuntur nihil perferendis porro, eius est quaerat deserunt debitis, nisi nostrum quam. Molestiae, doloribus soluta quod porro ullam sunt, animi praesentium ad, nostrum optio laboriosam maxime architecto veniam? Incidunt rerum ullam eos ad eius unde aperiam vitae sapiente quasi? Quo ipsum quibusdam officiis alias blanditiis nostrum adipisci voluptates nisi repellat quidem, necessitatibus illum eaque ea. Odit earum omnis voluptatem. Repudiandae, quos modi, eius cupiditate ratione cum ab aliquid facere maiores veritatis doloremque accusamus quaerat! Nobis placeat laudantium doloribus, ea minima molestias facere incidunt quod aut vel dolore sit obcaecati porro magni necessitatibus rem labore totam amet ipsa. Cupiditate, dolores officia voluptatum consequuntur ex velit facilis alias veritatis est eos id laudantium quibusdam ipsam iure fuga ipsa nisi laborum voluptas consectetur, ullam nemo exercitationem quasi et fugiat. Voluptates dolorem sapiente voluptatem quam nisi soluta numquam reprehenderit. Accusantium ipsa iste quod rerum nostrum id amet quaerat culpa iusto, fugit atque dignissimos similique maxime eligendi, reiciendis, minus fugiat error ut. Porro, distinctio architecto ex repellendus itaque tempore ea perspiciatis nostrum consectetur, fugiat laudantium, praesentium magnam eius dolores officia. Obcaecati voluptatum autem accusantium magni, ipsa dolorem id error natus fugit, sint debitis totam earum libero voluptatibus enim nisi blanditiis! Quod, unde ullam mollitia laudantium, ad vitae voluptatibus exercitationem magni totam veniam error rem necessitatibus numquam doloremque consequatur corrupti sapiente est commodi. Consequuntur, aliquid ut! Excepturi corrupti eos laborum maiores omnis atque ab, ratione consequuntur beatae architecto vitae eveniet dolor autem delectus velit distinctio consequatur dolores iusto itaque. Nulla vero quod quaerat itaque sit placeat exercitationem magnam voluptatem. Enim vero tempora reiciendis veritatis beatae quibusdam ratione blanditiis porro, sunt labore ad, doloremque culpa mollitia quos et illum eius est, veniam voluptatum officia inventore asperiores iure laudantium. Commodi maxime consectetur fuga non sunt nihil amet qui, vero soluta error? Quae facere laboriosam sint? Est laudantium odio cupiditate corrupti consequuntur recusandae, facere blanditiis, ratione sunt soluta at fugit iste repudiandae ut commodi. Reiciendis eum quas, voluptate, obcaecati dolorum asperiores fugiat quod saepe aliquid iusto odit? Necessitatibus non soluta iure molestiae exercitationem dolor adipisci praesentium architecto magni neque temporibus a consequuntur amet iste, doloribus officiis voluptates laborum dolores cum illo unde! Exercitationem voluptates unde sapiente qui? Necessitatibus culpa perspiciatis ipsum quod itaque aut architecto! Similique quo repudiandae facilis, architecto doloremque necessitatibus accusamus deserunt aperiam eaque harum blanditiis illo alias nobis commodi accusantium libero in! Officiis consequuntur obcaecati iusto minima, aliquam incidunt, perferendis reiciendis aliquid corporis praesentium harum, quis quae sed maiores? Laboriosam vero nemo officia ullam iste laborum minima suscipit animi culpa inventore rerum tempore sint sapiente, consequatur nobis vel illum dolor adipisci. Sint repellat, eligendi esse quaerat adipisci voluptas amet veritatis aperiam beatae nam cum fuga, excepturi eum sequi quisquam, officiis architecto voluptatum ullam quasi libero. Cum asperiores, laudantium totam deleniti dolorum veniam ipsa illo officia doloremque repellat quod debitis mollitia nisi assumenda perferendis iste, id velit? Pariatur ullam suscipit libero sapiente dolorum mollitia blanditiis distinctio repellat maiores officia optio iure cupiditate nostrum deserunt natus modi incidunt magnam molestiae, doloribus quae similique alias sint! Molestiae culpa doloremque, exercitationem, soluta eaque qui quia ipsa natus adipisci nihil sint possimus nesciunt ex quaerat sapiente nam. At laboriosam minima laudantium voluptas beatae, sed maiores labore consequatur, molestiae nesciunt qui inventore. Vitae, impedit? Eum ea modi repudiandae nisi maxime corporis, deleniti qui praesentium, velit, totam animi nam ullam? Unde dolore qui consectetur et culpa accusamus, nulla itaque impedit veniam molestiae ut earum exercitationem dolorum architecto quasi, doloremque autem excepturi. Veritatis corrupti iure repellendus animi consequatur quo non reprehenderit at eveniet beatae quis ipsa inventore quos esse, praesentium aut, tempore amet doloremque aperiam impedit aspernatur explicabo? Ad vitae animi deleniti doloribus dolorum necessitatibus nesciunt repudiandae, iure debitis a harum magni? Architecto minus ullam labore modi hic. Fuga fugiat pariatur exercitationem nihil, ratione provident. Modi, iste provident. Libero maxime aperiam voluptatem perferendis, molestiae est quis et ad sint reiciendis odit aliquid culpa explicabo ea repellendus sapiente dolore suscipit magni, doloremque eligendi error dolores, magnam cumque quisquam! Suscipit blanditiis dolores, veniam facere sint nostrum adipisci ad quaerat repudiandae expedita dolorem quam, magni officia similique tempora repellendus. Corporis at, dignissimos rem sapiente tempora impedit qui fugit in vitae cumque voluptatum aspernatur culpa ducimus, illo aperiam doloribus minima eveniet officiis, neque ratione possimus ipsam sunt asperiores. Natus magnam repellat libero deleniti nisi earum eligendi nam quibusdam aperiam doloribus, sit mollitia? Unde tempora suscipit labore! Enim hic iste suscipit recusandae assumenda ipsum facere, expedita nam atque quas animi natus exercitationem sunt, cupiditate officia. Unde blanditiis, harum quasi optio nostrum incidunt vel, vitae dolores at tempore numquam placeat iusto, architecto asperiores ducimus. Cum atque magnam ipsam molestiae. Soluta officiis autem unde, magni, tempore delectus cupiditate in itaque sint atque sit natus quo consectetur velit nostrum nihil ex. Nemo labore quisquam unde odit iste voluptates. Ipsa quod, asperiores id placeat sint minus aut ut at animi unde nihil facere mollitia dignissimos dolores error vitae! Aliquid totam voluptatibus officiis sequi fugiat perferendis? Vitae fugit saepe culpa necessitatibus velit quaerat, praesentium, enim neque ab molestias minima perferendis cum. Omnis magni distinctio sit cumque, fugiat optio esse maiores enim, rerum consequatur error aliquam necessitatibus ab a ad. Distinctio expedita aperiam error est nam optio doloremque tempore magni? Deserunt commodi laborum qui pariatur, ipsum recusandae amet excepturi ipsa! Quaerat deserunt quasi non nesciunt, illo eius praesentium, nostrum ipsa dolor doloremque voluptates aspernatur. Repudiandae assumenda dolorum velit deleniti voluptate, blanditiis voluptatum dolor alias pariatur mollitia quasi inventore.