ezPrintJS

Makes every page look better on the paper!


See it in action

Select a demo to see the code example and the result. Please allow window pop-ups if any problems occured


Code:


Scroll down the frame and hit "print":



Description

ezPrintJS is a tiny JavaScript library which allows to make pretty-looking printable pages without the need of modification even single line of existing code in your CSS styles and HTML markup. You are free to precisely customize content that your visitors will see on the paper.



Features



Usage

See the minimun example below: 

      
      <!-- optional: add polyfill BEFORE ezPrintJS if you're willing to support outdated (pre-ES6 era) browsers -->
      <script src="/path/to/polyfill.min.js"></script>

      <!-- include ezPrintJS library... -->
      <script src="/path/to/ezprintjs.min.js"></script>
  
      <!-- ...and set trigger to run ezPrintJS in plain JavaScript... -->
      <script>
        document.querySelector('#myPrintButton').addEventListener('click', function() {
          ezPrintJS({
            target: '#myContentID',
            // any combination of other options. See examples and docs!
          })
        })
      </script>

      <!-- ...or even shorter with jQuery -->
      <script>
        $('#myPrintButton').click(function() {
          ezPrintJS({
            target: '#myContentID',
            // any combination of other options. See examples and docs!
          })
        })
      </script>


Options


Option Data type Description
target string

The only required parameter. 'Target' should be valid CSS selector.

Forbidden target tags are:

'LINK', 'TITLE', 'HEAD', 'META', 'BASE', 'BASEFONT', 'SCRIPT', 'STYLE', 'NOSCRIPT', 'APPLET'
printInIframe boolean Print in hidden iframe without creating new window (v1.1.0)
setPrintSize string

Page size and orientation. See more at:

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size
beforePrintCb function Callback function, fires before new window will be created. No arguments will be passed
afterPrintCb function

Callback function, fires after print is done or cancelled. No arguments will be passed

Effective only with new window prints
exposeLinkUrls string

Extract link href and append it to link title

Valid values are:

  • 'all' - expose all hrefs
  • 'external' - expose hrefs from links that points to another host only
linkTextTemplate string

String template for link title extraction, needs '{title}' and '{url}'. Effective only with 'exposeLinkUrls' option enabled

Default template: '{title} [{url}]'

keepSourceCSS boolean Preserve original style/link tags on printing page
watermarkImageURL string URL for watermark image. Image will be centered and printed on every page with opacity set to 0.25
watermarkOpacity number Set custom watermark opacity. Value should be float number between 0 and 1 (v1.1.0)
headerText string Text for top tagline. Not recommended for multipage prints due overlapping
footerText string Text for bottom tagline. Not recommended for multipage prints due overlapping
revealHiddenElements boolean Reset 'display' option for elements with style set to 'display: none;'. Especially useful for printing tabbed content
printCanvas boolean Try to capture and print 2D content of canvas elements
extendScrollableAreas boolean|string

Expands vertical scrollable elements

Valid values are:

  • true - expand all vertical scrollable elements
  • 'table' - try to guess and expand only scrollable tables
scrollableAreasMaxHeight number Limit maximum height (in pixels) of expanded scrollable elements. Effective only with 'extendScrollableAreas' option enabled
excludeSelectorList array

Array of CSS selectors for unwanted elements. Target elements will be hidden in printable page.

Note: this option has higher priority over 'revealHiddenElements'

removeInlineStyles boolean Clean element's inline style
removeImages boolean Correctly removes images on printing page by replacing them with bordered (1px thickness) squares
injectCustomStyle string Inject any custom styles in printable page. See 'Demo 15' for more info
customMethodMap object

Most interesting option.

This option allows you to take full control over content that user will print

Object 'customMethodMap' should contain tag name as key, and array of functions as value

Let's say we wish modify all (or some) content wrapped in 'span' and 'figure' tags, then our 'customMethodMap' object will look like:

{ 'span': [fn1, fn2, ... fnN], 'figure': [fn1, fn2, ... fnN] }

Rules are dead-simple:

  • use '*' as tag name if you want to pass handlers for every element
  • every function will receive only one argument - current matched element, every function should return this element
  • functions executed in chain sequence order just like middlewares in Express framework, so next function will receive result of previous function (see 'Demo 16')
  • this keyword inside functions is bound to options you passed to ezPrintJS, so no ES6 arrow functions are allowed

v1.1.0 Made by Nedgeva, 2017. Buy at CodeCanyon