htmlpdfs

Sleeping

App Files Files Community

ABDALLALSWAITI commited on Oct 17, 2025

Commit

58e6b77

1 Parent(s): b1dd1e0

fix readme

Browse files

Files changed (2) hide show

README.md +6 -8
document.html +412 -0

README.md CHANGED Viewed

@@ -35,9 +35,7 @@ This guide covers the **optimized HTML to PDF conversion system** based on 2024-
 ### Example 1: Auto-Detection (Recommended)
 ```bash
-curl -X POST http://localhost:7860/convert \
-  -F "html_file=@document.html" \
-  -F "auto_detect=true" \
   -o output.pdf
 ```
@@ -49,7 +47,7 @@ The system will:
 ### Example 2: Force Multi-Page Document
 ```bash
-curl -X POST http://localhost:7860/convert \
   -F "html_file=@report.html" \
   -F "aspect_ratio=9:16" \
   -F "mode=multi" \
@@ -58,7 +56,7 @@ curl -X POST http://localhost:7860/convert \
 ### Example 3: Single-Page Infographic
 ```bash
-curl -X POST http://localhost:7860/convert \
   -F "html_file=@infographic.html" \
   -F "aspect_ratio=1:1" \
   -F "mode=single" \
@@ -67,7 +65,7 @@ curl -X POST http://localhost:7860/convert \
 ### Example 4: Presentation Slides
 ```bash
-curl -X POST http://localhost:7860/convert \
   -F "html_file=@presentation.html" \
   -F "aspect_ratio=16:9" \
   -F "mode=multi" \
@@ -76,7 +74,7 @@ curl -X POST http://localhost:7860/convert \
 ### Example 5: With Images
 ```bash
-curl -X POST http://localhost:7860/convert \
   -F "html_file=@document.html" \
   -F "images=@logo.png" \
   -F "images=@chart.jpg" \
@@ -517,4 +515,4 @@ waitUntil: 'networkidle2' // Instead of networkidle0
 **Version**: 2.0.0
 **Last Updated**: October 2025
-**Compatibility**: Puppeteer 23.x, Node.js 20.x

 ### Example 1: Auto-Detection (Recommended)
 ```bash
+curl -X POST https://abdallalswaiti-htmlpdfs.hf.space/convert \
   -o output.pdf
 ```
 ### Example 2: Force Multi-Page Document
 ```bash
+curl -X POST https://abdallalswaiti-htmlpdfs.hf.space/convert \
   -F "html_file=@report.html" \
   -F "aspect_ratio=9:16" \
   -F "mode=multi" \
 ### Example 3: Single-Page Infographic
 ```bash
+curl -X POST https://abdallalswaiti-htmlpdfs.hf.space/convert \
   -F "html_file=@infographic.html" \
   -F "aspect_ratio=1:1" \
   -F "mode=single" \
 ### Example 4: Presentation Slides
 ```bash
+curl -X POST https://abdallalswaiti-htmlpdfs.hf.space/convert \
   -F "html_file=@presentation.html" \
   -F "aspect_ratio=16:9" \
   -F "mode=multi" \
 ### Example 5: With Images
 ```bash
+curl -X POST https://abdallalswaiti-htmlpdfs.hf.space/convert \
   -F "html_file=@document.html" \
   -F "images=@logo.png" \
   -F "images=@chart.jpg" \
 **Version**: 2.0.0
 **Last Updated**: October 2025
+**Compatibility**: Puppeteer 23.x, Node.js 20.x

document.html ADDED Viewed

	@@ -0,0 +1,412 @@

+<!DOCTYPE html>
+<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>&lt;thead&gt;</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>