Prntr (Printer)

A tiny javascript library to help printing from the web.

Print.js but modern and maintained.

This is a fork of Print.js but transformed into a Typescript package.

Only 3.7kB gzipped!

🙏 Thank you Rodrigo for all your hard work!

Installation

You can download the latest version of Prntr from NPM

To install via npm:

npm i prntr --save

To install via yarn:

yarn add prntr

Usage

Import the library into your project:

import prntr from 'prntr'

Or use the library directly in a script tag using the umd build and a CDN or such like this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/prntr.umd.min.js"></script>

Browser Support

• Chrome: Latest 2 versions should work at least
• Chrome mobile: does not work. It calls onIncompatibleBrowser callback.
• Chrome tablet: does not work. It calls onIncompatibleBrowser callback.
• Firefox: Latest 2 versions should work at least. Firefox requires you to set 'open PDF in browser' setting to true in your browser settings to be able to print PDFs and such.
• Safari: Latest 2 versions should partially work. Safari 14/15 has issues with printing more than once. See this issue on StackOverflow.
• Safari Mobile: Not working on iphone. It calls onIncompatibleBrowser callback.
• Safari Tablet: Not working on ipad . It calls onIncompatibleBrowser callback.
• Edge: Latest 2 versions should work at least. Old EdgeHTML engine should also work. Maybe you need to transpile package though.
• IE11: NOPE! IE11 is really old and even Microsoft itself stopped supporting it.

Feel free to send pull requests to fix any browser issues!

Documentation

Extensive examples can be found in the /example html document.

First import the prnt function:

import prntr from 'prntr'

This is not needed per se since prntr is also available on the window as window.prntr

Print a PDF

To print a simple pdf:

prntr({
  frameId: 'uniquePdfId',
  printable: '/path-to/document.pdf',
  type: 'pdf'
})

Print HTML

To print the contents of a HTML Element:

prntr({
  frameId: 'uniqueId',
  printable: 'elementId', // The id of the DOM Element
  type: 'html'
})

Print Raw HTML

To print an HTML string:

prntr({
  frameId: 'uniqueId',
  printable: `<h1>Prntr Raw HTML Print Test</h1>
<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>`,
  type: 'raw-html',
  style: 'h1 { color: red; } .blue { color:blue; }',
})

You can also add custom CSS:

prntr({
  frameId: 'uniqueId',
  printable: 'elementId', // The id of the DOM Element
  type: 'html',
  css: '/path-to/customStyle.css',
  scanStyles: false,  // The library will not process styles applied to the html being printed
})

Print JSON

To print JSON content in a Table:

const data = [
  {
    name: 'Daphne',
    age: 35,
    country: 'NL',
  },
  {
    name: 'Jessica',
    age: 30,
    country: 'NL',
  }
]

prntr({
  printable: data,
  properties: ['name', 'age'],
  type: 'json',
  gridStyle: 'border: 2px solid red;',
  gridHeaderStyle: 'color: red;  border: 2px solid green;',
})

Print Image(s)

To print a single image:

prntr({
  frameId: 'uniqueId',
  printable: '/images/some-image-1.jpg',
  type: 'image',
})

To print multiple images:

prntr({
  frameId: 'uniqueId',
  printable: [
    '/images/some-image-1.jpg',
    '/images/some-image-2.jpg'
  ],
  type: 'image',
  style: 'img { max-width: 50%; }',
})

Contributing to Prntr

Contributions to Prntr are greatly welcomed and encouraged.

Using issues

The issue tracker is the preferred channel for reporting bugs, requesting new features and submitting pull requests.

Keep in mind that we would like to keep this a lightweight library.

Please do not use the issues channel for support requests. For help with using Prntr Please ask questions on Stack Overflow and use the tag prntr.

Reporting bugs

Well structured, detailed bug reports are hugely valuable for the project.

• Check the issue search to see if it has already been reported.
• Isolate the problem to a simple test case.
• Create a codepen or codesandbox or similar online example replicating the issue.

Please provide any additional details associated with the bug.

Pull requests

Clear, concise pull requests are excellent at continuing the project's community driven growth.

Please make your commits in logical sections with clear commit messages.

Start developing using the example

Open 2 terminal tabs.

In the first tab run:

yarn
yarn watch

In the second tab run:

yarn dev

Open up http://localhost:3000/example/index.html in your browser!

Tests

The library is written following the Javascript Standard code style. When running tests, we will also test for any style issues or warnings using Eslint..

Building

This package is using preconstruct to build our code painlessly with a zero config script.

Releasing

This package is using changesets to release the right package versions.

License

Prntr is available under the MIT license.