Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Page PDF Example</title> | |
| <style> | |
| /* General document styling */ | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| margin: 0; | |
| padding: 40px; | |
| background: white; | |
| } | |
| /* Page setup for printing */ | |
| @media print { | |
| @page { | |
| size: A4 portrait; | |
| margin: 20mm; | |
| } | |
| body { | |
| padding: 0; | |
| } | |
| } | |
| /* Page containers - each will be a new page */ | |
| .page { | |
| min-height: 100vh; | |
| padding: 40px; | |
| page-break-after: always; | |
| break-after: page; | |
| } | |
| .page:last-child { | |
| page-break-after: auto; | |
| } | |
| /* Header styles */ | |
| h1 { | |
| color: #2563eb; | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| page-break-after: avoid; | |
| } | |
| h2 { | |
| color: #1e40af; | |
| font-size: 2em; | |
| margin-top: 30px; | |
| margin-bottom: 15px; | |
| page-break-after: avoid; | |
| } | |
| h3 { | |
| color: #3b82f6; | |
| font-size: 1.5em; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| } | |
| /* Paragraph styles */ | |
| p { | |
| margin: 15px 0; | |
| text-align: justify; | |
| } | |
| /* Box styling */ | |
| .info-box { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| margin: 20px 0; | |
| page-break-inside: avoid; | |
| } | |
| .warning-box { | |
| background: #fef3c7; | |
| border-left: 4px solid #f59e0b; | |
| padding: 20px; | |
| margin: 20px 0; | |
| page-break-inside: avoid; | |
| } | |
| /* Table styles */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 20px 0; | |
| page-break-inside: auto; | |
| } | |
| thead { | |
| background: #2563eb; | |
| color: white; | |
| display: table-header-group; /* Repeat on every page */ | |
| break-inside: avoid; | |
| } | |
| th, td { | |
| padding: 12px; | |
| text-align: left; | |
| border: 1px solid #ddd; | |
| } | |
| tr { | |
| page-break-inside: avoid; | |
| page-break-after: auto; | |
| } | |
| tbody tr:nth-child(even) { | |
| background: #f3f4f6; | |
| } | |
| /* List styles */ | |
| ul, ol { | |
| margin: 15px 0; | |
| padding-left: 30px; | |
| } | |
| li { | |
| margin: 8px 0; | |
| } | |
| /* Code block */ | |
| pre { | |
| background: #1f2937; | |
| color: #f9fafb; | |
| padding: 20px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| page-break-inside: avoid; | |
| } | |
| code { | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9em; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| color: #6b7280; | |
| font-size: 0.9em; | |
| margin-top: 40px; | |
| padding-top: 20px; | |
| border-top: 2px solid #e5e7eb; | |
| } | |
| /* Special elements */ | |
| .keep-together { | |
| page-break-inside: avoid; | |
| break-inside: avoid; | |
| } | |
| .signature { | |
| margin-top: 60px; | |
| border-top: 1px solid #333; | |
| padding-top: 10px; | |
| width: 200px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Page 1: Title Page --> | |
| <div class="page"> | |
| <div style="text-align: center; margin-top: 200px;"> | |
| <h1 style="font-size: 3em; margin-bottom: 20px;">Annual Report 2024</h1> | |
| <p style="font-size: 1.5em; color: #6b7280;">Company Performance Overview</p> | |
| <div style="margin-top: 100px;"> | |
| <p><strong>Prepared by:</strong> Analytics Department</p> | |
| <p><strong>Date:</strong> October 17, 2025</p> | |
| <p><strong>Document Type:</strong> Multi-Page PDF Demo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Page 2: Executive Summary --> | |
| <div class="page"> | |
| <h1>Executive Summary</h1> | |
| <div class="info-box"> | |
| <h3 style="color: white; margin-top: 0;">Key Highlights</h3> | |
| <p style="color: white;">This document demonstrates advanced PDF generation capabilities including multi-page support, proper page breaks, and professional formatting.</p> | |
| </div> | |
| <h2>Overview</h2> | |
| <p> | |
| This example document showcases the advanced capabilities of modern HTML to PDF conversion | |
| using Puppeteer. The system intelligently handles page breaks, maintains formatting across | |
| pages, and ensures that related content stays together. | |
| </p> | |
| <p> | |
| The PDF generation engine supports multiple aspect ratios (16:9 for presentations, 1:1 for | |
| social media, and 9:16 for documents), automatic mode detection, and sophisticated CSS | |
| page break controls. | |
| </p> | |
| <h2>Features Demonstrated</h2> | |
| <ul> | |
| <li><strong>Multi-page support</strong> with natural page breaks</li> | |
| <li><strong>Page break control</strong> using CSS properties</li> | |
| <li><strong>Table header repetition</strong> across pages</li> | |
| <li><strong>Keep-together elements</strong> to prevent awkward splits</li> | |
| <li><strong>Professional formatting</strong> with consistent styling</li> | |
| <li><strong>Print-optimized CSS</strong> for perfect rendering</li> | |
| </ul> | |
| <div class="warning-box"> | |
| <strong>⚠️ Important Note:</strong> This document uses CSS page break properties to control | |
| how content flows across pages. Modern browsers and PDF generators respect these properties | |
| when properly configured. | |
| </div> | |
| </div> | |
| <!-- Page 3: Data Table --> | |
| <div class="page"> | |
| <h1>Quarterly Performance Data</h1> | |
| <p> | |
| The following table demonstrates how table headers automatically repeat on each page when | |
| the table spans multiple pages. This is achieved using the <code>display: table-header-group</code> | |
| CSS property on the <code><thead></code> element. | |
| </p> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Quarter</th> | |
| <th>Revenue</th> | |
| <th>Growth</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Q1 2024</td> | |
| <td>$2,450,000</td> | |
| <td>+12.5%</td> | |
| <td>✓ Target Met</td> | |
| </tr> | |
| <tr> | |
| <td>Q2 2024</td> | |
| <td>$2,780,000</td> | |
| <td>+13.5%</td> | |
| <td>✓ Target Met</td> | |
| </tr> | |
| <tr> | |
| <td>Q3 2024</td> | |
| <td>$3,120,000</td> | |
| <td>+12.2%</td> | |
| <td>✓ Target Met</td> | |
| </tr> | |
| <tr> | |
| <td>Q4 2024</td> | |
| <td>$3,650,000</td> | |
| <td>+17.0%</td> | |
| <td>✓ Exceeded</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2>Regional Performance</h2> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Region</th> | |
| <th>Sales</th> | |
| <th>Market Share</th> | |
| <th>Year-over-Year</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>North America</td> | |
| <td>$8,500,000</td> | |
| <td>42%</td> | |
| <td>+15%</td> | |
| </tr> | |
| <tr> | |
| <td>Europe</td> | |
| <td>$6,200,000</td> | |
| <td>31%</td> | |
| <td>+18%</td> | |
| </tr> | |
| <tr> | |
| <td>Asia Pacific</td> | |
| <td>$4,100,000</td> | |
| <td>20%</td> | |
| <td>+22%</td> | |
| </tr> | |
| <tr> | |
| <td>Latin America</td> | |
| <td>$1,400,000</td> | |
| <td>7%</td> | |
| <td>+9%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Page 4: Technical Implementation --> | |
| <div class="page"> | |
| <h1>Technical Implementation</h1> | |
| <h2>CSS Best Practices for PDF Generation</h2> | |
| <p> | |
| Proper PDF generation requires careful consideration of CSS page break properties. | |
| Here are the key techniques used in this document: | |
| </p> | |
| <div class="keep-together"> | |
| <h3>Page Break Control</h3> | |
| <pre><code>/* Force a page break after this element */ | |
| .page { | |
| page-break-after: always; | |
| break-after: page; | |
| } | |
| /* Prevent breaks inside an element */ | |
| .keep-together { | |
| page-break-inside: avoid; | |
| break-inside: avoid; | |
| } | |
| /* Avoid breaks after headings */ | |
| h1, h2, h3 { | |
| page-break-after: avoid; | |
| }</code></pre> | |
| </div> | |
| <div class="keep-together"> | |
| <h3>Table Header Repetition</h3> | |
| <pre><code>/* Make table headers repeat on each page */ | |
| thead { | |
| display: table-header-group; | |
| break-inside: avoid; | |
| } | |
| /* Prevent table rows from breaking */ | |
| tr { | |
| page-break-inside: avoid; | |
| }</code></pre> | |
| </div> | |
| <h2>Key Configuration Options</h2> | |
| <ul> | |
| <li><strong>preferCSSPageSize: true</strong> - Respects CSS @page rules</li> | |
| <li><strong>printBackground: true</strong> - Includes background colors and images</li> | |
| <li><strong>emulateMediaType('print')</strong> - Uses print CSS media queries</li> | |
| <li><strong>format: 'A4'</strong> - Standard paper size for documents</li> | |
| </ul> | |
| </div> | |
| <!-- Page 5: Conclusion --> | |
| <div class="page"> | |
| <h1>Conclusion</h1> | |
| <p> | |
| This document has demonstrated the comprehensive capabilities of modern HTML to PDF | |
| conversion using Puppeteer with proper page break handling and professional formatting. | |
| </p> | |
| <h2>Summary of Capabilities</h2> | |
| <div class="keep-together"> | |
| <h3>Multi-Page Support</h3> | |
| <p> | |
| The system automatically handles documents of any length, properly breaking content | |
| across pages while respecting CSS page break properties. Content stays together when | |
| needed, and breaks naturally when appropriate. | |
| </p> | |
| </div> | |
| <div class="keep-together"> | |
| <h3>Professional Formatting</h3> | |
| <p> | |
| All styling, including backgrounds, colors, fonts, and layouts, is preserved in the | |
| final PDF. The output is print-ready and maintains professional appearance across | |
| all pages. | |
| </p> | |
| </div> | |
| <div class="keep-together"> | |
| <h3>Flexible Configuration</h3> | |
| <p> | |
| Support for multiple aspect ratios, automatic mode detection, and extensive CSS | |
| control makes this solution suitable for any document type, from reports and invoices | |
| to presentations and infographics. | |
| </p> | |
| </div> | |
| <div class="footer"> | |
| <p>End of Document</p> | |
| <p>Generated with Advanced HTML to PDF API v2.0</p> | |
| <p>© 2024-2025 | All Rights Reserved</p> | |
| </div> | |
| <div class="signature"> | |
| <p><strong>Approved By:</strong></p> | |
| <p>_______________________</p> | |
| <p style="font-size: 0.9em; margin-top: 5px;">Director of Operations</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |