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 is a small (618 bytes gzipped) script to print HTMLElements. Printd opens the Print Dialog to print elements inside a blank document. It also supports CSS Text for custom styles.

🚀 Live demo
📚 Demo source code

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

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

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

Function to print 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 launchPrint(win) to trigger the printing.
- win: Window reference.
- doc: Document reference.
- node: HTMLElement reference.
- launchPrint(win): 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;
  }
`

const callback = (win, doc, node, launchPrint) => {
  // trigger the printing
  launchPrint(win)
}

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

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