npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

prntr

v2.0.18

Published

A tiny javascript library to help printing from the web. Print.js but modern and maintained.

Downloads

5,268

Readme

Prntr (Printer)

Github Build Status Software License Standard - JavaScript Style Guide npm bundlephobia

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.