Print-to-PDF Tool

Minimal, zero-dependency print-to-PDF tool using browser native window.print() API

Overview

Minimal, zero-dependency print-to-PDF tool using browser native window.print() API.

Key Features

Zero Dependencies - Uses only browser APIs
Page Configuration - Size, orientation, margins
Smart Page Breaks - Avoid breaking tables, images, headings
Content Optimization - Hide elements, optimize images
Callbacks - Before/after print events

const printer = Domma.elements.printToPDF('#content', {
    pageSize: 'A4',
    orientation: 'portrait',
    margins: 'normal'
});
printer.print();

Basic Print Example

Note: Configure print options when creating the instance, then call print() to trigger the browser's native print dialog.

Basic Print Example

This is a sample document demonstrating the print-to-PDF functionality. The content below will be optimized for printing.

Sample Data Table

Name	Email	Phone	City
Alice Johnson	alice@example.com	(555) 123-4567	New York
Bob Smith	bob@example.com	(555) 234-5678	Los Angeles
Carol Williams	carol@example.com	(555) 345-6789	Chicago
David Brown	david@example.com	(555) 456-7890	Houston
Eve Davis	eve@example.com	(555) 567-8901	Phoenix

Key Points

Zero dependencies - uses browser print API
Configurable page size and orientation
Smart page break handling
Works with any HTML content

Note: This tool triggers the browser's native print dialog. Users can then choose to save as PDF or send to a printer.

<div class="controls-print-to-pdf"><button type="button" id="print-default" class="btn btn-primary">
        <span data-icon="printer" data-icon-size="18"></span>
        Print Default (A4)
    </button>
    <button type="button" id="print-letter" class="btn btn-secondary">
        <span data-icon="printer" data-icon-size="18"></span>
        Print Letter Size
    </button>
    <button type="button" id="print-landscape" class="btn btn-outline">
        <span data-icon="printer" data-icon-size="18"></span>
        Print Landscape
    </button>
    <button type="button" id="print-no-bg" class="btn btn-outline">
        <span data-icon="printer" data-icon-size="18"></span>
        Print (No Backgrounds)
    </button>
</div>
<div id="print-content" class="demo-content-print-to-pdf">

    <p>This is a sample document demonstrating the print-to-PDF functionality. The content below will be
        optimized for printing.</p>

    <h3>Sample Data Table</h3>
    <table class="sample-table-print-to-pdf">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Johnson</td>
                <td>alice@example.com</td>
                <td>(555) 123-4567</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Bob Smith</td>
                <td>bob@example.com</td>
                <td>(555) 234-5678</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Carol Williams</td>
                <td>carol@example.com</td>
                <td>(555) 345-6789</td>
                <td>Chicago</td>
            </tr>
            <tr>
                <td>David Brown</td>
                <td>david@example.com</td>
                <td>(555) 456-7890</td>
                <td>Houston</td>
            </tr>
            <tr>
                <td>Eve Davis</td>
                <td>eve@example.com</td>
                <td>(555) 567-8901</td>
                <td>Phoenix</td>
            </tr>
        </tbody>
    </table>

    <h3>Key Points</h3>
    <ul>
        <li>Zero dependencies - uses browser print API</li>
        <li>Configurable page size and orientation</li>
        <li>Smart page break handling</li>
        <li>Works with any HTML content</li>
    </ul>

    <p><strong>Note:</strong> This tool triggers the browser's native print dialog. Users can then choose to
        save as PDF or send to a printer.</p>
</div>

/**
 * Basic Print Example - from public/showcase/print-to-pdf.
 */
export function mount(root) {
        // Setup print buttons using Config Engine
    $.setup({
            '#print-default': {
                events: {
                    click: () => {
                        const printer = E.printToPDF(root.querySelector('#print-content'), {
                            pageSize: 'A4',
                            orientation: 'portrait',
                            margins: 'normal',
                            title: 'Sample Document - A4',
                            onBeforePrint: () => console.log('Printing...'),
                            onAfterPrint: () => console.log('Print completed or cancelled')
                        });
                        printer.print();
                    }
                }
            },
            '#print-letter': {
                events: {
                    click: () => {
                        const printer = E.printToPDF(root.querySelector('#print-content'), {
                            pageSize: 'Letter',
                            orientation: 'portrait',
                            margins: 'normal',
                            title: 'Sample Document - Letter'
                        });
                        printer.print();
                    }
                }
            },
            '#print-landscape': {
                events: {
                    click: () => {
                        const printer = E.printToPDF(root.querySelector('#print-content'), {
                            pageSize: 'A4',
                            orientation: 'landscape',
                            margins: 'wide',
                            title: 'Sample Document - Landscape'
                        });
                        printer.print();
                    }
                }
            },
            '#print-no-bg': {
                events: {
                    click: () => {
                        const printer = E.printToPDF(root.querySelector('#print-content'), {
                            pageSize: 'A4',
                            orientation: 'portrait',
                            margins: 'normal',
                            removeBackgrounds: true,
                            title: 'Sample Document - No Backgrounds'
                        });
                        printer.print();
                    }
                }
            }
        });
}

API Reference

Option	Type	Default	Description
`pageSize`	String	`'A4'`	'A4', 'Letter', 'Legal', or custom {width, height}
`orientation`	String	`'portrait'`	'portrait' or 'landscape'
`margins`	String	`'normal'`	'none', 'narrow', 'normal', 'wide', or custom
`title`	String	`null`	Document title for print
`removeBackgrounds`	Boolean	`false`	Strip background colors/images
`optimizeImages`	Boolean	`true`	Ensure images fit page width
`hideElements`	Array	`[]`	Selectors of elements to hide
`onBeforePrint`	Function	`null`	Called before print dialog
`onAfterPrint`	Function	`null`	Called after print/cancel

Methods

Method	Description
`print()`	Trigger browser print dialog immediately
`setOptions(options)`	Update configuration options
`destroy()`	Cleanup and remove print styles

Note: The preview() method is not implemented. Configure all options when creating the instance.