Home

Awesome

Printd CI npm npm JavaScript Style Guide

Print HTML elements or pages in modern browsers. :printer:

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

Features

Demos

Install

Yarn

yarn add printd

NPM

npm install printd --save

UMD file is also available on unpkg:

<script src="https://unpkg.com/printd/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 = new Printd()
d.print( document.getElementById('myelement'), [ cssText ] )

API

options

Example:

// custom base element example
const base = document.createElement('base')
base.setAttribute('href', 'https://your-cdn.dev')

// define options to use
const options = {
  parent: document.getElementById('myparent'),
  headElements: [ base ]
}

const d = new Printd(options)

print

Function to print an HTMLElement.

d.print (element, styles, scripts, callback)

Print parameters:

1. Basic example

const d = new Printd()

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

2. Callback example

Callback option is suitable when you plan to print elements or pages with assets (images, fonts, etc) but you need to wait for them. Your callback will be triggered only when your assets are loaded.

const d = new Printd()

// Tip: texts & urls are supported

const styles = [
  'https://your-cdn.dev/style.css',
  `.code { font-family: monospace; }`
]

const scripts = [
  'https://your-cdn.dev/script.js',
  `(() => console.log('Hello from IFrame!'))()`
]

// Get an HTMLElement reference
const el = document.getElementById('mycode-block')
// Trigger the print dialog on demand
const printCallback = ({ launchPrint }) => launchPrint()

d.print(el, styles, scripts, printCallback)

printURL

Function to print an URL.

PrintURL parameters:

const d = new Printd()

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

  // fire printing!
  launchPrint()
})

Built-in print events

Printd provides convenient print event methods on top of the Browser beforeprint and afterprint events. However note that they only work when printing custom HTML elements via the print() method.

const d = new Printd()

d.onBeforePrint((event) => console.log(event, "called before printing!"))
d.onAfterPrint((event) => console.log(event, "called after printing!"))

d.print(document.getElementById('myelement'))

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

References:

beforeprint & afterprint workaround (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:

Security

Since Printd uses an underlying iframe it's highly recommended to ensure that only your content will be displayed. As a fallback you could remove the hidden iframe after some printing.

Here some interesting security advices that you want to take at look:

Contributions

Feel free to send some Pull request or issue.

License

MIT license

© 2017-present Jose Quintana