printd

Printd

Print HTML elements in modern browsers. :printer:

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.

:tada: 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()
})

Contributions

Feel free to send some Pull request or issue.

License

MIT license

© 2017 José Luis Quintana