light-print

🖨️ Lightweight • Exceptional style fidelity • Modern DOM printing

🚀 Live Demo →.

• Universal: Supports canvas, MathML, SVG, common pseudo-elements, Web Components and more
• Auto-Styled: Preserves the existing styles without extra CSS setup
• Lightweight: Zero Dependencies & 3KB minzipped
• Callback-Free: Native promise handling for print workflows

Install

npm i light-print
# or
yarn add light-print
# or
pnpm add light-print

CDN

<!-- After importing, `window.lightPrint` is globally available. -->
<script src="https://cdn.jsdelivr.net/npm/light-print@2"></script>

If the browser doesn't support Promise (e.g., Internet Explorer), a global polyfill is required.

Usage

Print container elements and their descendants.

After the browser displays the print dialog:

• Select any printer to print.
• Select the "Save as PDF" option to generate a PDF file.

import lightPrint from 'light-print';

lightPrint('#id', {
  // Modify different aspects of printed pages.
  mediaPrintStyle: '@page { size: A4 portrait }',
}).then(() => {
  // Executes when the print dialog closes.
});

• Accepts either a CSS selector or an actual element.
• Returns a Promise that resolves when the print dialog closes.

Usage in Vue

<script setup>
import { useTemplateRef } from 'vue';
import lightPrint from 'light-print';
// Prior to Vue v3.5, we could declare a `ref` matching the name of the template's ref attribute value.
const targetRef = useTemplateRef('target');

async function print() {
  await lightPrint(targetRef.value);
}
</script>

<template>
  <div ref="target">
    <!-- some nodes -->
  </div>
</template>

Usage in React

import { useRef } from 'react';
import lightPrint from 'light-print';

function MyComponent() {
  const targetRef = useRef(null);

  async function print() {
    await lightPrint(targetRef.current);
  }

  return <div ref={targetRef}>{/* some nodes */}</div>;
}

The same approach works with other frameworks/libraries.

Types

interface PrintOptions {
  /** Document title */
  documentTitle?: string;
  /** Additional print styles */
  mediaPrintStyle?: string;
  /** Document zoom level */
  zoom?: number | string;
}

function lightPrint(containerOrSelector: Element | string, options?: PrintOptions): Promise<void>;

FAQ

1. Is this compatible with React/Vue/Angular?

   Works directly with DOM Element or framework refs (useRef in React, template ref in Vue, etc.). See our framework examples.

2. How to handle page breaks?

   Use CSS page break properties, e.g.,

   .page-break {
     page-break-after: always;
     break-after: page;
   }

3. How to implement headers/footers?

   Configure via paged media in the mediaPrintStyle, or set page margins to zero and manually implement the DOM structure for headers/footers.

4. Why are some styles missing after printing?

   Because those styles may be inherited from the parent; you need to restate them (e.g., background) directly on the print-element container.

Suggestions

• It is recommended to specify fixed dimensions (width and height) for the print-element container, as it cannot adapt to page dimensions when printing.
• To print hidden elements, hide the parent of the container element (e.g., display: none) instead of hiding the container element itself.
• Automatic font loading is not supported for non-Chromium browsers. You can declare @font-face within the mediaPrintStyle, for example:

  const mediaPrintStyle = `
    @font-face {
      font-family: 'PrintFont';
      src: url('print-font.woff2') format('woff2');
    }
  `;

---

Feedback and contributions are welcome! Feel free to open an Issue or Pull Request.

If you find it useful, a star ⭐ on GitHub would be much appreciated.