Printd

Print HTML elements or URLs in modern browsers. 🖨️

Printd opens your Browser Print Dialog to print HTML elements inside a blank document or pages by URL.

Features

• Written and tested entirely in Typescript.
• Tiny script (around 800 bytes gzipped with no dependencies).
• Print any element without opening a new window.
• Custom CSS Text support.
• Printd waits until content such as images or fonts are ready to print.
• Print pages by URL.

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

import { Printd } from 'printd'

const cssText = `
  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 an HTMLElement.

d.print (el, cssText, callback)

Print parameters:

• element: The HTMLElement to print.
• cssText: Optional CSS Text that will add to head section of the iframe document.
• callback: Optional callback that will be triggered when content is ready to print.
  • Callback arguments:
  • iframe: Iframe reference. iframe already contains contentWindow and contentDocument references.
  • element: HTMLElement copy reference.
  • launchPrint: Function to launch the print dialog after content was loaded.

1. Basic example:

const d = new Printd()

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

2. Callback example:

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

// trigger the print dialog on demand when content (E.g. text, images, etc) is ready to print
const printCallback = ({ launchPrint }) => launchPrint()

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

printURL

Function to print an URL.

PrintURL parameters:

• url: URL to print.
• callback: Optional callback that will be triggered when content is ready to print.

const d = new Printd()

d.printURL('http://127.0.0.1/', ({ launchPrint }) => {
  console.log('Content loaded!')

  // fire printing!
  launchPrint()
})

getIFrame

Gets the current HTMLIFrameElement reference.

Examples:

const d = new Printd()
const iframe = d.getIFrame()

// a) Subscribe to IFrame load event
iframe.addEventListener('load', () => console.log('iframe loaded!'))

// b) Subscribe to Window `beforeprint` or `afterprint` events
const { contentWindow } = iframe
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:

• Chrome Platform Status - beforeprint and afterprint events
• https://caniuse.com/#feat=beforeafterprint
• PR: Update support for before/after print event handlers (Blink)
• 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

© 2017-present José Quintana