FitToPage.js

https://github.com/sulimanbenhalim/fit-to-page
Admin
FitToPage.js automatically measures HTML content and fits it onto a single PDF page when printing,...
Tokens:7,716
Snippets:46
Trust Score:6.8
License:MIT
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install FitToPage.js via npm

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This code snippet shows how to install the fit-to-page library using npm, the Node Package Manager. This is the recommended method for projects using a module bundler.

```bash
npm install fit-to-page
```

--------------------------------

### Basic FitToPage.js Initialization

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This basic example shows how to initialize FitToPage.js to fit all content on a single page when printing. It assumes the fit-to-page.js script has already been included.

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

--------------------------------

### Install FitToPage.js via npm

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

Install FitToPage.js as an npm package for integration into modern JavaScript projects using module bundlers. This method requires a build process and Node.js environment.

```bash
npm install fit-to-page
```

```javascript
// In your JavaScript module
const FitToPage = require('fit-to-page');

// Or with ES6 imports
import FitToPage from 'fit-to-page';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    FitToPage.init({
        selector: '.main-content',
        margin: 12,
        padding: 6,
        orientation: 'auto',
        onReady: function(info) {
            // Enable print button only after measurement
            document.getElementById('print-btn').disabled = false;
            document.getElementById('print-btn').addEventListener('click', function() {
                window.print();
            });
        }
    });
});

```

--------------------------------

### FitToPage.js for Dynamic Content

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This example shows how to use FitToPage.js with dynamic content. After loading new content, `FitToPage.remeasure()` should be called to recalculate and adjust the page size accordingly.

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

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

--------------------------------

### FitToPage.js Initialization Example

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/demo.html

Demonstrates how to initialize FitToPage.js with custom configuration options. It specifies the content selector, margins, padding, debug mode, and provides a callback for when the FitToPage is ready, logging information about content and page dimensions. This script requires the 'fit-to-page.js' file to be included.

```javascript
<script src="fit-to-page.js"></script>
<script>
    FitToPage.init({
        selector: '.container',
        margin: 10,
        padding: 5,
        orientation: 'auto',
        debug: true
    });
</script>
```

```javascript
FitToPage.init({ selector: '.container', margin: 10, padding: 5, debug: true, onReady: function(info) { console.log('FitToPage ready!'); console.log('Content dimensions:', info.width, 'x', info.height); console.log('PDF page size:', info.pageSize); } });
```

--------------------------------

### Install FitToPage.js via CDN

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

Load FitToPage.js directly from a CDN for quick integration into HTML documents without requiring a package manager. This method is suitable for simple projects or rapid prototyping.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice Generator</title>
    <style>
        .invoice {
            width: 800px;
            margin: 0 auto;
            padding: 40px;
            font-family: Arial, sans-serif;
        }
        .invoice-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .items table {
            width: 100%;
            border-collapse: collapse;
        }
        .items th, .items td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="invoice">
        <div class="invoice-header">
            <div>
                <h1>INVOICE</h1>
                <p>Invoice #: 2024-001</p>
                <p>Date: 2024-12-06</p>
            </div>
            <div>
                <strong>Company Name</strong><br>
                123 Business St<br>
                City, State 12345
            </div>
        </div>

        <div class="items">
            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Web Development Services</td>
                        <td>40 hours</td>
                        <td>$150.00</td>
                        <td>$6,000.00</td>
                    </tr>
                    <tr>
                        <td>Hosting Setup</td>
                        <td>1</td>
                        <td>$500.00</td>
                        <td>$500.00</td>
                    </tr>
                </tbody>
            </table>
            <p style="text-align: right; margin-top: 20px; font-size: 18px;">
                <strong>Total: $6,500.00</strong>
            </p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/fit-to-page@1.0.0/fit-to-page.js"></script>
    <script>
        FitToPage.init({
            selector: '.invoice',
            margin: 15,
            orientation: 'portrait'
        });
    </script>
</body>
</html>

```

--------------------------------

### FitToPage.js for Multi-column Layout

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This HTML and JavaScript example shows how to use FitToPage.js to print a multi-column layout onto a single landscape page. It sets the selector to the grid container and specifies landscape orientation.

```html
<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>
```

--------------------------------

### FitToPage.js Debug Mode Example

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This JavaScript code snippet initializes FitToPage.js in debug mode, which displays an information box with content and page dimensions. It also includes a callback to log these dimensions to the console.

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

--------------------------------

### FitToPage.js for Long Report

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This example demonstrates using FitToPage.js to print a long report onto a single page with larger margins. It sets the selector to the report container and adjusts the margin option.

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

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

--------------------------------

### FitToPage.js Initialization with Options

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This JavaScript code demonstrates how to initialize FitToPage.js with custom options. It allows you to specify the element to measure, page margins, padding, orientation, and includes a callback function that executes when the page is ready.

```javascript
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 }
    }
});
```

--------------------------------

### Initialize FitToPage.js for Printing

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

Initializes the FitToPage library to measure and fit HTML content to a single PDF page. Supports basic and advanced configurations including element selection, margins, padding, DPI, orientation, debug mode, and callbacks. The `onReady` callback provides detailed dimension information in pixels and millimeters.

```javascript
FitToPage.init();

FitToPage.init({
    selector: '.report-content',
    margin: 15,
    padding: 8,
    dpi: 96,
    orientation: 'landscape',
    debug: true,
    preventPageBreaks: true,
    onReady: function(info) {
        console.log('Content size:', info.width.px, 'x', info.height.px);
        console.log('Content in mm:', info.width.mm, 'x', info.height.mm);
        console.log('Page size:', info.pageSize.width, 'x', info.pageSize.height, 'mm');
    }
});

// Expected output when printing:
// - Content is measured at 1200px x 1994px
// - Converted to 317.5mm x 527.6mm
// - With margins: 340mm x 550mm
// - PDF generated at exactly 340mm x 550mm with all content on one page
```

--------------------------------

### FitToPage.js Configuration Options

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This table outlines the available configuration options for FitToPage.js, including their types, default values, and descriptions. These options allow fine-grained control over how the content is fitted to the page.

```json
{
  "selector": "string", "default": "'body'", "description": "CSS selector of element to measure"
}
{
  "margin": "number", "default": `10`, "description": "Page margin in mm"
}
{
  "padding": "number", "default": `5`, "description": "Extra padding in mm"
}
{
  "dpi": "number", "default": `96`, "description": "Screen DPI for px→mm conversion"
}
{
  "orientation": "string", "default": "'auto'", "description": "Page orientation"
}
{
  "debug": "boolean", "default": `false`, "description": "Show dimension info box"
}
{
  "preventPageBreaks": "boolean", "default": `true`, "description": "Prevent content breaking across pages"
}
{
  "onReady": "function", "default": `null`, "description": "Callback when ready"
}
```

--------------------------------

### Custom Element Selection for Printing (HTML & JavaScript)

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

This snippet demonstrates how to target specific HTML elements for fitting to a page, rather than the entire document body. It's useful for multi-section pages where only a portion needs to be printed or exported. The `selector` option in `FitToPage.init` specifies the target element.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Report Generator</title>
</head>
<body>
    <!-- Navigation and UI - NOT included in PDF -->
    <nav style="padding: 20px; background: #333; color: white;">
        <button id="print-report">Print Report</button>
        <button id="export-data">Export Data</button>
    </nav>

    <!-- Main content - INCLUDED in PDF -->
    <div class="printable-report" style="max-width: 900px; margin: 40px auto; padding: 30px;">
        <h1>Annual Financial Report 2024</h1>

        <section class="summary">
            <h2>Executive Summary</h2>
            <p>Total revenue increased by 23% year-over-year to $4.2M...</p>
        </section>

        <section class="financials">
            <h2>Financial Breakdown</h2>
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <th style="border: 1px solid #ddd; padding: 10px;">Category</th>
                    <th style="border: 1px solid #ddd; padding: 10px;">Amount</th>
                </tr>
                <tr>
                    <td style="border: 1px solid #ddd; padding: 10px;">Revenue</td>
                    <td style="border: 1px solid #ddd; padding: 10px;">$4,200,000</td>
                </tr>
                <tr>
                    <td style="border: 1px solid #ddd; padding: 10px;">Expenses</td>
                    <td style="border: 1px solid #ddd; padding: 10px;">$2,800,000</td>
                </tr>
                <tr>
                    <td style="border: 1px solid #ddd; padding: 10px;">Net Profit</td>
                    <td style="border: 1px solid #ddd; padding: 10px;">$1,400,000</td>
                </tr>
            </table>
        </section>
    </div>

    <!-- Footer - NOT included in PDF -->
    <footer style="padding: 20px; background: #f5f5f5; text-align: center;">
        <p>© 2024 Company Name. All rights reserved.</p>
    </footer>

    <script src="fit-to-page.js"></script>
    <script>
        // Only measure and fit the .printable-report element
        FitToPage.init({
            selector: '.printable-report',  // Specific element, not entire body
            margin: 12,
            padding: 8,
            orientation: 'portrait',
            onReady: function(info) {
                console.log('Report section fitted:',
                    info.pageSize.width + 'mm × ' + info.pageSize.height + 'mm');
            }
        });

        // Custom print button
        document.getElementById('print-report').addEventListener('click', function() {
            window.print();
        });
    </script>
</body>
</html>
```

--------------------------------

### Include FitToPage.js via CDN

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This HTML snippet demonstrates how to include the fit-to-page library directly into your web page using a Content Delivery Network (CDN). This is useful for simple projects or quick prototyping.

```html
<script src="https://cdn.jsdelivr.net/npm/fit-to-page@1.0.0/fit-to-page.js"></script>
```

--------------------------------

### FitToPage.js Working Mechanism

Source: https://github.com/sulimanbenhalim/fit-to-page/blob/main/README.md

This illustrates the step-by-step process FitToPage.js follows to fit content onto a single printed page. It involves measuring content, converting units, adding margins, and injecting CSS rules.

```text
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
```

--------------------------------

### Handle Dynamic Content with remeasure() in HTML

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

This snippet shows an HTML page that uses FitToPage.js to create a single-page PDF. It includes buttons to dynamically add content sections, add a chart visualization, and clear all content. After each dynamic modification, FitToPage.remeasure() is called to update the page dimensions for accurate PDF generation. The script initializes FitToPage and sets up event listeners for the buttons.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Content Example</title>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .content-section { margin-bottom: 20px; padding: 15px; background: #f9f9f9; }
        .load-btn { padding: 10px 20px; margin: 10px 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dynamic Report</h1>

        <button class="load-btn" id="add-section">Add Section</button>
        <button class="load-btn" id="add-chart">Add Chart</button>
        <button class="load-btn" id="clear-all">Clear All</button>

        <div id="content">
            <div class="content-section">
                <h2>Initial Content</h2>
                <p>This is the starting content of the report.</p>
            </div>
        </div>
    </div>

    <script src="fit-to-page.js"></script>
    <script>
        // Initial setup
        FitToPage.init({
            selector: '.container',
            margin: 12,
            padding: 6,
            debug: true,
            onReady: function(info) {
                console.log('Initial page size:', info.pageSize);
            }
        });

        // Add section dynamically
        document.getElementById('add-section').addEventListener('click', function() {
            const content = document.getElementById('content');
            const section = document.createElement('div');
            section.className = 'content-section';
            section.innerHTML = "<h1>Section ${content.children.length + 1}</h1>\n                <p>This section was added dynamically at ${new Date().toLocaleTimeString()}.</p>\n                <p>Additional data and information goes here...</p>";
            content.appendChild(section);

            // Remeasure after adding content
            FitToPage.remeasure();
            console.log('Content added, page remeasured');
        });

        // Add chart dynamically
        document.getElementById('add-chart').addEventListener('click', function() {
            const content = document.getElementById('content');
            const chart = document.createElement('div');
            chart.className = 'content-section';
            chart.innerHTML = "<h1>Sales Chart</h1>\n                <div style=\"height: 200px; background: linear-gradient(to top, #4CAF50 0%, #4CAF50 60%, #2196F3 60%, #2196F3 100%);\">
                    <p style=\"text-align: center; padding-top: 20px;">Chart Visualization</p>
                </div>";
            content.appendChild(chart);

            // Remeasure after adding chart
            FitToPage.remeasure();
            console.log('Chart added, page remeasured');
        });

        // Clear all content
        document.getElementById('clear-all').addEventListener('click', function() {
            document.getElementById('content').innerHTML = '';
            FitToPage.remeasure();
            console.log('Content cleared, page remeasured');
        });
    </script>
</body>
</html>
```

--------------------------------

### Force Landscape Orientation for Wide Content with FitToPage (HTML & JavaScript)

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

This snippet demonstrates forcing landscape orientation for wide content like dashboards. It uses HTML for the content structure and CSS for styling. The FitToPage JavaScript library is initialized with the 'orientation: 'landscape'' option to ensure the page is rendered in landscape mode, suitable for wide layouts. The 'onReady' callback provides information about the fitted page size.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sales Dashboard</title>
    <style>
        .dashboard {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 30px;
        }
        .metric-card {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .metric-value {
            font-size: 36px;
            font-weight: bold;
            color: #2c3e50;
        }
        .metric-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="metric-card">
            <div class="metric-value">$124,500</div>
            <div class="metric-label">Total Revenue</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">1,847</div>
            <div class="metric-label">New Customers</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">94.2%</div>
            <div class="metric-label">Satisfaction Rate</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">3,204</div>
            <div class="metric-label">Orders Processed</div>
        </div>
    </div>

    <script src="fit-to-page.js"></script>
    <script>
        FitToPage.init({
            selector: '.dashboard',
            margin: 15,
            padding: 10,
            orientation: 'landscape',  // Force landscape mode
            debug: true,
            onReady: function(info) {
                console.log('Dashboard fitted to landscape page:',
                    info.pageSize.width + 'mm (width) × ' +
                    info.pageSize.height + 'mm (height)');
            }
        });
    </script>
</body>
</html>
```

--------------------------------

### Enable Debug Mode in FitToPage.js

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

Activate debug mode to visualize content dimensions and calculated page sizes before printing. This is useful for troubleshooting layout issues and understanding how the library measures and scales content.

```javascript
FitToPage.init({
    selector: '#report',
    margin: 10,
    padding: 5,
    debug: true,  // Shows debug info box
    orientation: 'auto',
    onReady: function(info) {
        console.log('=== FitToPage Debug Info ===');
        console.log('Content Width:', info.width.px + 'px', '(' + info.width.mm.toFixed(1) + 'mm)');
        console.log('Content Height:', info.height.px + 'px', '(' + info.height.mm.toFixed(1) + 'mm)');
        console.log('Page Size:', info.pageSize.width.toFixed(1) + 'mm × ' + info.pageSize.height.toFixed(1) + 'mm');

        // Verify page size is within reasonable limits
        if (info.pageSize.width > 500 || info.pageSize.height > 500) {
            console.warn('Warning: Page size is very large. Consider reducing content or using smaller fonts.');
        }
    }
});

```

--------------------------------

### Remeasure Content for Dynamic Updates

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

Manually triggers a re-measurement of content dimensions after dynamic updates, ensuring the PDF print settings remain accurate. This is essential when new content is loaded or existing content is modified after the initial FitToPage.js initialization.

```javascript
FitToPage.init({
    selector: '#dashboard',
    margin: 10,
    debug: true
});

document.getElementById('load-more').addEventListener('click', function() {
    fetch('/api/more-data')
        .then(response => response.json())
        .then(data => {
            const dashboard = document.getElementById('dashboard');
            data.items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'data-item';
                div.innerHTML = `<h3>${item.title}</h3><p>${item.content}</p>`;
                dashboard.appendChild(div);
            });
            FitToPage.remeasure();
        });
});

// Expected behavior:
// - Initial page size calculated on load
// - After clicking "load-more", new content is added
// - remeasure() recalculates dimensions
// - New @page size injected to accommodate expanded content
// - Printing still produces a single-page PDF
```

--------------------------------

### Page Break Prevention Control (JavaScript)

Source: https://context7.com/sulimanbenhalim/fit-to-page/llms.txt

This snippet shows how to control page breaks within content using the `preventPageBreaks` option in `FitToPage.init`. Setting it to `true` prevents elements from splitting across pages, while `false` allows natural page breaking. This affects the generated CSS for print media.

```javascript
// Enable page break prevention (default)
FitToPage.init({
    selector: '.article',
    preventPageBreaks: true,  // Prevents elements from splitting
    margin: 10,
    onReady: function(info) {
        console.log('Page breaks prevented. Single page size:',
            info.pageSize.width + 'mm × ' + info.pageSize.height + 'mm');
    }
});

/* Generated CSS with preventPageBreaks: true
@page {
    size: 340.0mm 550.0mm;
    margin: 10mm;
}

@media print {
    * {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .article {
        page-break-after: avoid !important;
        max-width: 100%;
    }
}
*/

// Disable page break prevention
FitToPage.init({
    selector: '.article',
    preventPageBreaks: false,  // Allow content to split if needed
    margin: 10
});

/* Generated CSS with preventPageBreaks: false
@page {
    size: 340.0mm 550.0mm;
    margin: 10mm;
}

@media print {
    .fit-to-page-debug {
        display: none !important;
    }
}
*/

// Expected behavior:
// - With preventPageBreaks: true - All content stays together, no mid-element splits
// - With preventPageBreaks: false - Content may split naturally if it exceeds page size

```
Tokens:
Raw