light-print

light-print

🖨️ Lightweight HTML element printing for browsers.

🚀 View an online usage example.

• 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

• Is this compatible with React/Vue/Angular?

  Works with all frameworks! See our framework examples.

• How to handle page breaks?

  Use CSS page break properties, e.g.

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

• 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.

• 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.

Limitations

• It is recommended to specify fixed dimensions (width and height) for the print-element container, as it cannot adapt to page dimensions when printing.
• 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');
    }
  `;