FitToPage.js

HTML content → single PDF page when printing

Automatically measures rendered content and sets custom @page size to fit everything on one page. Works with browser's native print (Cmd+P / Ctrl+P).

Install

npm

npm install fit-to-page

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/fit-to-page.js"></script>

Manual

Download fit-to-page.js and include it in your HTML.

Usage

Basic

<script src="fit-to-page.js"></script>
<script>
    FitToPage.init();
</script>

Press Cmd+P → Save as PDF → Everything fits on one page

With Options

FitToPage.init({
    selector: '.content',      // Element to measure
    margin: 10,                // Page margin (mm)
    padding: 5,                // Extra padding (mm)
    orientation: 'landscape',  // 'auto' | 'portrait' | 'landscape'
    debug: true,               // Show dimension info
    onReady: (info) => {
        console.log(info.pageSize);  // { width: 340, height: 550 }
    }
});

Dynamic Content

FitToPage.init({ selector: '#content' });

// Later, when content changes
document.getElementById('load-more').onclick = () => {
    // Load content...
    FitToPage.remeasure();
};

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | selector | string | 'body' | CSS selector of element to measure | | margin | number | 10 | Page margin in mm | | padding | number | 5 | Extra padding in mm | | dpi | number | 96 | Screen DPI for px→mm conversion | | orientation | string | 'auto' | Page orientation | | debug | boolean | false | Show dimension info box | | preventPageBreaks | boolean | true | Prevent content breaking across pages | | onReady | function | null | Callback when ready |

How It Works

1. Measure content → 1200px × 1994px
2. Convert to mm → 317.5mm × 527.6mm
3. Add margins → 340mm × 550mm
4. Inject CSS → @page { size: 340mm 550mm; }
5. Print → One page PDF

Examples

Multi-column Layout

<div class="grid" style="display: grid; grid-template-columns: 1fr 1fr;">
    <div>Column 1</div>
    <div>Column 2</div>
</div>

<script>
    FitToPage.init({ selector: '.grid', orientation: 'landscape' });
</script>

Long Report

<div class="report">
    <h1>Annual Report 2024</h1>
    <!-- Long content -->
</div>

<script>
    FitToPage.init({ selector: '.report', margin: 15 });
</script>

Debug Mode

FitToPage.init({
    debug: true,  // Shows info box with dimensions
    onReady: (info) => {
        console.log('Content:', info.width, '×', info.height);
        console.log('Page:', info.pageSize);
    }
});

Comparison

| Feature | FitToPage | html2pdf.js | Puppeteer | Print.js | |---------|-----------|-------------|-----------|----------| | Native print (Cmd+P) | ✓ | ✗ | ✗ | ~ | | Auto-fit one page | ✓ | ~ | ~ | ✗ | | Text preserved | ✓ | ✗ | ✓ | ✓ | | Client-side only | ✓ | ✓ | ✗ | ✓ | | Zero dependencies | ✓ | ✗ | ✗ | ✗ | | Size <5KB | ✓ | ✗ | ✗ | ✓ |

Browser Support

• Chrome/Edge (recommended - best @page support)
• Firefox
• Safari

License

MIT

Author

Suliman Benhalim - [email protected]