Printd

Print HTML elements in modern browsers. 🖨️

Printd is a small script to print HTMLElements. Printd opens the Print Dialog to print elements inside a blank document. It also supports CSS Text for custom styles.

🎉 View demo on CodePen.

Install

Yarn

yarn add printd --dev

NPM

npm install printd --save-dev

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

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

Methods

constructor

The 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

Prints the current HTMLElement.

Params:

• el: The HTMLElement to print.
• cssText: Optional CSS Text to add custom styles to the current element.
• callback: Optional callback function. _Inside the callback it's necessary to call win.print() to trigger the printing.
  • win: Window reference.
  • doc: Document reference.
  • node: HTMLElement reference.

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;
  }
`

d.print(document.getElementById('mycode'), cssText, (win, doc, node) => {
  // trigger the printing
  win.print()
})

getIFrame

Returns the current HTMLIFrameElement reference.

Events

const { contentWindow } = d.getIFrame()

contentWindow.addEventListener('beforeprint', () => console.log('before print!'))
contentWindow.addEventListener('afterprint', () => console.log('after print!'))

Browser compatibility:

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

References:

• https://www.chromestatus.com/features/5700595042222080
• https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

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:

• https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
• https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

Contributions

Feel free to send some Pull request or issue.

License

MIT license

© 2018 José Luis Quintana