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!
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/prntr@2.0.13/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.