Printout.js JavaScript Library Examples

A JavaScript printing library to print specific DOM elements while maintaining their visual aspect.

Example 1: All printout.js Options
Class Heading Heading
Default Column-1 Column-2
Primary Column-1 Column-2
Secondary Column-1 Column-2
Success Column-1 Column-2
Danger Column-1 Column-2
Warning Column-1 Column-2
Info Column-1 Column-2
Light Column-1 Column-2
Dark Column-1 Column-2
Code
                                    
<script>
    printout("#example1", {
        pageTitle: window.document.title, // Title of the page
        importCSS: true, // Import parent page css
        inlineStyle: true, // If true it takes inline style tag
        autoPrint: true, // Print automatically when the page is open
        autoPrintDelay: 1000, // Delay in milliseconds before printing
        header: null, // String or element this will be appended to the top of the printout
        footer: null, // String or element this will be appended to the bottom of the printout
        noPrintClass: "no-print", // Class to remove the elements that should not be printed
    });
</script>
Example 2: Printing the body of this card
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Code
                                    
<script>
    printout('#example2');
</script>
Example 3: Inline style tag

This is h1 element that has inline style class

Code
                                    
<style>
    .h1-inline {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;
    }
</style>
<script>
    printout('#example3');
</script>