Package Exports

printd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (printd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Printd

Print HTML elements in modern browsers. 🖨️

Printd opens your Browser Print Dialog to print HTML elements inside a blank document.

Features

Written and tested entirely in Typescript.
Tiny script (around 600 bytes gzipped with no dependencies).
Print any element without opening a new window.
Custom CSS Text support.

Demos

🚀 Live demo
📚 Demo source code

Install

Yarn

yarn add printd

NPM

npm install printd --save

UMD file is also available on unpkg:

<script src="https://unpkg.com/printd/dist/printd.umd.min.js"></script>

You can use the library via window.printd.

Usage

ES6

import { Printd } from 'printd'

// some styles for the element (optional)
const cssText = `
  table {
    font-size: 85%;
    font-family: sans-serif;
    border-spacing: 0;
    border-collapse: collapse;
  }
`

const d = new Printd()

// opens the "print dialog" of your browser to print the element
d.print( document.getElementById('mytable'), cssText )

Typescript

import { Printd } from 'printd'

const cssText: string = `
  h1 {
    color: black;
    font-family: sans-serif;
  }
`

const d: Printd = new Printd()
d.print( document.getElementById('myelement'), cssText )

API

constructor

Constructor supports an optional parent element (HTMLElement) where the printable element will be appended. Default value is window.document.body.

Example:

const d = new Printd( document.getElementById('myparent') )

print

Function to print the current HTMLElement.

d.print (el, cssText, callback)

Print parameters:

element: The HTMLElement to print.
cssText: Optional CSS Text to add custom styles to the current element.
callback: Optional callback function. It's necessary to call launchPrint() to trigger the printing.

Print callback arguments:

document: Iframe contentDocument reference.
window: Iframe contentWindow reference
element: HTMLElement copy reference.
launchPrint: Function to trigger the printing on demand.

Basic example:

const d = new Printd()

d.print( document.getElementById('h1'), `h1 { font-family: serif; }` )

Callback example:

const d = new Printd()
const cssText = `
  .code {
    font-family: monospace;
  }
`

// trigger the print dialog on demand
const printCallback = ({ launchPrint }) => launchPrint()

d.print(document.getElementById('mycode'), cssText, printCallback)

getIFrame

Gets the current HTMLIFrameElement reference.

Example:

const d = new Printd()
const { contentWindow } = d.getIFrame()

// subscribe to `beforeprint` and `afterprint` events
contentWindow.addEventListener('beforeprint', () => console.log('before print!'))
contentWindow.addEventListener('afterprint', () => console.log('after print!'))

Browser compatibility

Chrome Desktop 63+
Chrome for Android 63+
Firefox 6+
Edge
Internet Explorer
Opera Desktop 50+
Opera for Android 50+

References:

Webkit-based and old browsers

For Webkit-based browsers, it can create an equivalent result using window.matchMedia('print').

if (contentWindow.matchMedia) {
  const mediaQueryList = contentWindow.matchMedia('print')

  mediaQueryList.addListener((mql) => {
    if (mql.matches) {
      console.log('before print!')
    } else {
      console.log('after print!')
    }
  })
}

References:

Contributions

Feel free to send some Pull request or issue.

License

MIT license