### 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 ``` -------------------------------- ### 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 ``` ```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 Invoice Generator

INVOICE

Invoice #: 2024-001

Date: 2024-12-06

Company Name
123 Business St
City, State 12345

Description	Quantity	Price	Total
Web Development Services	40 hours	$150.00	$6,000.00
Hosting Setup	1	$500.00	$500.00

Total: $6,500.00

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

Column 1

Column 2

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

Annual Report 2024

``` -------------------------------- ### 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 Report Generator

Annual Financial Report 2024

Executive Summary

Total revenue increased by 23% year-over-year to $4.2M...

Financial Breakdown

Category	Amount
Revenue	$4,200,000
Expenses	$2,800,000
Net Profit	$1,400,000

``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Dynamic Content Example

Dynamic Report

Initial Content

This is the starting content of the report.

``` -------------------------------- ### 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 Sales Dashboard

$124,500

Total Revenue

1,847

New Customers

94.2%

Satisfaction Rate

3,204

Orders Processed

``` -------------------------------- ### 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 = `

${item.title}

${item.content}

`; 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 ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.