Print HTML elements or pages in modern browsers. 🖨
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Jose Quintana ea151cfa8b
1.4.1
2 months ago
.github add the ability to passing head and body elements as options (#35) 7 months ago
.vscode add the ability to passing head and body elements as options (#35) 7 months ago
sample add the ability to passing head and body elements as options (#35) 7 months ago
src feat: add relative path backwards support 2 months ago
test Load styles and scripts on demand (#27) 9 months ago
.gitignore update packages 1 year ago
.npmignore fix ignored files 1 year ago
.travis.yml fix: travis config 2 months ago
LICENSE.md v1.2.0 (#25) 9 months ago
README.md add security section 4 months ago
karma.conf.js add the ability to passing head and body elements as options (#35) 7 months ago
package.json 1.4.1 2 months ago
rollup.config.js update packages 1 year ago
tsconfig.json update tslint-config-standard-plus 1 year ago
tslint.json update packages 1 year ago
yarn.lock Bump @types/jasmine from 3.3.14 to 3.3.16 (#86) 3 months ago

README.md

Printd npm npm Build Status 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

  • Written and tested entirely in Typescript.
  • Tiny script (around 1KB gzipped with no dependencies).
  • Print any element without opening a new window.
  • Print only when assets such as images or fonts are ready (loaded).
  • Print pages by URL.
  • Add styles and scripts on demand using text or URL.

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

  • parent: Optional parent element where the printable element will be appended. Default window.document.body
  • headElements: Optional custom document head elements array.
  • bodyElements: Optional custom document body elements array.

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:

  • element: Some HTMLElement object to print.
  • styles: Optional styles (array of texts or urls) that will add to iframe (document.head)
  • scripts: Optional scripts (array of texts or urls) that will add to iframe (document.body)
  • callback: Optional callback that will be triggered when content is ready to print.
    • callback arguments:
    • iframe: An HTMLIFrameElement reference. It already contains contentWindow and contentDocument references.
    • element: An HTMLElement copy (cloned node) reference of current element to print.
    • launchPrint: Function to launch the print dialog after assets (images, fonts, etc) was loaded.

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:

  • 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 11
  • Opera Desktop 50+
  • Opera for Android 50+

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 José Quintana