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

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>