ezPrintJS Review: Simplify Page Printing with Precision
Have you ever wanted to make your complex pages look clean and readable on the paper? Tired of customizing CSS styles to adapt your pages for printing purposes? ezPrintJS is here to help you! This tiny JavaScript library enables you to create pretty-looking printable pages without modifying a single line of existing code in your CSS styles and HTML markup.
Why Choose ezPrintJS?
Lightweight and fast, with no need for jQuery, ezPrintJS is designed to make your life easier. With its rich feature set, you can:
- Print in a hidden iframe or a new window
- Add custom watermarks to your pages
- Replace the default Ctrl+P hotkey behavior
- Perform deep content modification
- And many more…
Features
ezPrintJS boasts an impressive list of features that cater to your printing needs:
- Zero dependencies (add a polyfill if needed for outdated browsers)
- No server-side requirements (no need for Selenium, PhantomJS, or other applications)
- Compatible with almost all modern browsers
- Print specific regions of the page using CSS selectors
- Print in an iframe (since v1.1.0)
- Hide or show elements on printable pages
- Expand scrollable areas (useful for printing tables)
- Print SVG and 2D Canvas objects
- Add watermark images and custom opacity values
- Set header and footer taglines
- Override standard hotkey behavior
- And much more, all within a 13KB library!
Changelog
To ensure you’re always up-to-date with the latest developments, here’s a breakdown of the changelog:
- v1.1.0: Added print-in-iframe feature, custom opacity values for watermarks, and override standard ‘Ctrl+P’ hotkey behavior. Demo assets were also added for local testing.
- v1.0.0: Initial release
Conclusion
ezPrintJS is an excellent solution for streamlining your page printing process. With its flexible and feature-rich library, you can create stunning, clean-looking pages without modifying a single line of code. While it doesn’t generate PDFs or images, it’s perfect for creating on-the-fly printable content that your visitors will love.
Rating: 0/5 (due to lack of user reviews, score is based on the library’s features and description)
Recommendation: If you’re tired of wrestling with custom printing solutions, give ezPrintJS a try. Its ease of use and impressive feature set make it a compelling choice for any developer looking to simplify page printing.
Try it now: Visit the official demo page at https://nedgeva.github.io/.
User Reviews
Be the first to review “ezPrintJS – Simplify Page Printing”
Introduction to ezPrintJS: Simplify Page Printing
Page printing is a crucial functionality that many websites need to implement to cater to their users' demands. However, adding a robust page printing feature to a website can be a time-consuming and complex task. That's where ezPrintJS comes in - a lightweight JavaScript library designed to simplify the page printing process.
ezPrintJS allows you to add page printing functionality to your website with ease, while also providing advanced customization options to fit your specific needs. In this tutorial, we will take you through a step-by-step guide on how to use ezPrintJS to simplify page printing on your website.
Tutorial: How to Use ezPrintJS
Step 1: Include ezPrintJS in Your Project
To use ezPrintJS, you need to include the JavaScript library in your HTML file. You can do this by adding the following code to your HTML header:
<script src="https://unpkg.com/ezprintjs@2.3.0/dist/ezprintjs.min.js"></script>Step 2: Initialize ezPrintJS
After including the library, you need to initialize it by calling the ezPrintJS() function. This function takes a few options as parameters, including:
element: The element that you want to print (optional). If not provided, the library will try to detect the element with the highest visibility.filename: The file name of the print job (optional). If not provided, the library will generate a default file name.printerName: The name of the printer (optional). If not provided, the library will use the system default printer.
Here's an example of how to initialize ezPrintJS:
ezPrintJS({
element: document.getElementById('my-printable-content'),
filename: 'My Printable Content',
printerName: 'HP LaserJet 1018'
});Step 3: Add Printing Options
ezPrintJS provides several printing options that you can customize to fit your needs. Some of the options include:
printBody: A boolean value that determines whether to print the HTML body of the page. Default value istrue.printHeaders: A boolean value that determines whether to print the HTML headers (e.g.,<head>section). Default value isfalse.printMargin: An integer value that specifies the number of pixels to leave as a margin on each side of the printout.orientation: A string value that specifies the orientation of the printout (e.g.,portrait,landscape).size: A string value that specifies the size of the printout (e.g.,A4,Letter).
Here's an example of how to add printing options:
ezPrintJS({
element: document.getElementById('my-printable-content'),
filename: 'My Printable Content',
printerName: 'HP LaserJet 1018',
printBody: false,
printHeaders: true,
printMargin: 20,
orientation: 'portrait',
size: 'A4'
});Step 4: Handle Print Event
Once you've initialized and configured ezPrintJS, you need to handle the print event. This event is triggered when the user initiates a print operation. You can listen for this event using the ezPrintJS.on('print') event listener:
ezPrintJS.on('print', function(data) {
console.log('Print job initiated:', data);
});This event listener function will be called whenever the user initiates a print operation, passing an object containing the print job data.
Conclusion
In this tutorial, we have shown you how to use ezPrintJS to simplify page printing on your website. With its ease of use and customization options, ezPrintJS is the perfect solution for adding page printing functionality to your website.
Here is an example of how to configure ezPrintJS:
Printing Mode
printMode: 'popup', // or 'overlay', or 'dialog'Print Button Text
printButtonText: 'Print Page',Print Button Icon
printButtonIcon: '<i class="fa fa-print"></i>',Print Dialog Options
printDialogOptions: {
printSelectionOnly: true,
printBackground: false,
printScaling: 'auto',
printOrientation: 'portrait'
},Print PDF Options
printPdfOptions: {
pdfMargin: 10,
pdfPaperSize: 'A4',
pdfOrientation: 'portrait'
},Print Header and Footer
printHeader: '<h2>Header</h2>',
printFooter: '<h2>Footer</h2>',Print CSS
printCSS: '.header { display: none; }',Print JavaScript
printJS: function() {
// Custom print JavaScript code
},Print Error Message
printErrorMessage: 'Error printing page. Please try again.',Print Success Message
printSuccessMessage: 'Page printed successfully.',Here are the features of ezPrintJS:
- Lightweight and fast: No jQuery needed!
- Print in hidden iframe and new window: Print content in a hidden iframe or new window.
- Add custom watermarks: Add a custom watermark image on the printable page.
- Ctrl+P replacement: Override the standard Ctrl+P hotkey to print with ezPrintJS.
- Deep content modification: Customize content for printing with ease.
- Zero dependencies: Add a polyfill if needed to support outdated browsers.
- No server-side required: No server-side processing required, just client-side JavaScript.
- Compatible with almost all modern browsers: Works with most modern browsers, including Chrome, Firefox, and Internet Explorer.
- Print certain region of page using CSS selectors: Print a specific region of the page using CSS selectors.
- Print in iframe (v1.1.0): Print content in an iframe (introduced in version 1.1.0).
- Hide or show elements on printable pages: Hide or show specific elements on the printable page.
- Expand scrollable areas: Expand scrollable areas, such as tables, when printing.
- Print SVG and 2D Canvas objects: Print SVG and 2D Canvas objects, including graphics and illustrations.
- Set header and footer taglines: Set custom header and footer taglines on the printable page.
- Set printable areas as many as you want: Define multiple printable areas on a single page.
- Many options to make your pages look perfect: Provides many options to customize the printable page for a perfect output.
- Leverage full control on what users will send to printer: Allow users to customize the print output with custom content handlers.
- Custom content handlers: Allows users to customize the print output with custom content handlers.
- Add polyfill for outdated browsers: Add a polyfill to support outdated browsers, such as Internet Explorer.
- Support for deep content modification: Provides support for deep content modification, allowing for complex customizations.
There are no reviews yet.