{"id":20268830,"url":"https://github.com/patrikx3/html-pdf","last_synced_at":"2025-04-11T03:41:24.640Z","repository":{"id":57317512,"uuid":"95411207","full_name":"patrikx3/html-pdf","owner":"patrikx3","description":"πŸ“ƒ Generates PDF from HTML with custom headers and footers with wkhtmltopdf","archived":false,"fork":false,"pushed_at":"2025-02-01T18:12:03.000Z","size":996,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-25T01:41:33.763Z","etag":null,"topics":["corifeus","custom","footer","header","html","html-pdf","multiple","npm","p3x","pdf","wkhtmltopdf"],"latest_commit_sha":null,"homepage":"https://www.corifeus.com/html-pdf/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrikx3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-26T05:24:08.000Z","updated_at":"2025-02-01T18:12:07.000Z","dependencies_parsed_at":"2024-04-25T07:30:22.729Z","dependency_job_id":"52b731fd-0a8b-47ed-85e0-4a83ed1ec0b7","html_url":"https://github.com/patrikx3/html-pdf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrikx3%2Fhtml-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrikx3%2Fhtml-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrikx3%2Fhtml-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrikx3%2Fhtml-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrikx3","download_url":"https://codeload.github.com/patrikx3/html-pdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339286,"owners_count":21087213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["corifeus","custom","footer","header","html","html-pdf","multiple","npm","p3x","pdf","wkhtmltopdf"],"created_at":"2024-11-14T12:20:22.562Z","updated_at":"2025-04-11T03:41:24.627Z","avatar_url":"https://github.com/patrikx3.png","language":"JavaScript","funding_links":["https://paypal.me/patrikx3","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QZVM4V6HVZJW6"],"categories":[],"sub_categories":[],"readme":"[//]: #@corifeus-header\n\n [![NPM](https://img.shields.io/npm/v/p3x-html-pdf.svg)](https://www.npmjs.com/package/p3x-html-pdf) [![Donate for PatrikX3 / P3X](https://img.shields.io/badge/Donate-PatrikX3-003087.svg)](https://paypal.me/patrikx3) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Corifeus @ Facebook](https://img.shields.io/badge/Facebook-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software) [![Uptime ratio (90 days)](https://network.corifeus.com/public/api/uptime-shield/31ad7a5c194347c33e5445dbaf8.svg)](https://network.corifeus.com/status/31ad7a5c194347c33e5445dbaf8)\n\n\n\n\n\n# πŸ“ƒ Generates PDF from HTML with custom headers and footers with wkhtmltopdf v2025.4.169\n\n\n \n🌌 **Bugs are evidentβ„’ - MATRIX️** \n🚧 **This project is under active development!** \nπŸ“’ **We welcome your feedback and contributions.** \n \n\n\n\n### NodeJS LTS is supported\n\n### πŸ› οΈ Built on NodeJs version\n\n```txt\nv22.13.1\n```\n\n\n\n\n\n# πŸ“ Description\n\n \n[//]: #@corifeus-header:end\n\n\n**p3x-html-pdf** is a Node.js package that generates PDFs from HTML with custom headers and footers using `wkhtmltopdf`. It is a robust tool for creating professional-grade PDFs with features like:\n\n- πŸ“œ **Dynamic Headers and Footers**: Add placeholders for page numbers, dates, and more.\n- πŸ› οΈ **Customizable Layouts**: Configure margins, orientation, and paper size.\n- ⚑ **Async/Await Support**: Modern JavaScript compatibility for efficient workflows.\n- πŸ”„ **Dynamic Content**: Render data-driven tables and content dynamically.\n\n---\n\n## πŸš€ Installation\n\nInstall via Yarn:\n\n```bash\nyarn add p3x-html-pdf\n```\n\nOr install via npm:\n\n```bash\nnpm install p3x-html-pdf\n```\n\nImport in your project:\n\n```javascript\nconst { generate } = require('p3x-html-pdf');\n```\n\n---\n\n## πŸ“– Usage Example\n\n```javascript\nconst { generate } = require('p3x-html-pdf');\nconst path = require('path');\n\n(async () =\u003e {\n const outputPath = path.join(process.cwd(), 'p3x-html-pdf-output.pdf');\n \n const options = {\n settings: {\n save: true,\n template: {\n format: 'A4',\n marginLeft: 10,\n marginRight: 10,\n fixedWidth: null,\n fixedHeight: null,\n copies: 1,\n orientation: 'portrait',\n },\n html: `\n \u003cdiv id=\"p3x-header-1\" data-height=\"40mm\"\u003e\n \u003cdiv style=\"width: 100%; padding: 0px; display: table;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle;\"\u003e\n \u003cimg src=\"http://cdn.corifeus.com/assets/png/patrikx3.png\" alt=\"Header Logo\" style=\"height:40mm; margin:0;\"/\u003e\n \u003c/div\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right; width: 100%;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Invoice - First Page\u003c/h1\u003e\n \u003cp style=\"margin: 5px 0 0; font-size: 14px; color: #555;\"\u003eGenerated: ${new Date().toLocaleDateString()}\u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-header\" data-height=\"40mm\" \u003e\n \u003cdiv style=\"display: table; width: 100%; height: 40mm; text-align: right;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Invoice \u003c/h1\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-header-last\" data-height=\"40mm\" \u003e\n \u003cdiv style=\"display: table; width: 100%; height: 40mm; text-align: right;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Final Notes \u003c/h1\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-footer\" data-height=\"10mm\"\u003e\n \u003cdiv style=\"text-align: right; font-size: 12px; color: #777;\"\u003e\n Page \\${page} of \\${pages} \n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-footer-last\" data-height=\"10mm\"\u003e\n \u003cdiv style=\"text-align: right; font-size: 12px; color: #777;\"\u003e\n Final \\${page} of \\${pages} \n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003ch2 style=\"color: #222;\"\u003eInvoice Content\u003c/h2\u003e\n \u003cp style=\"font-size: 14px; color: #555;\"\u003eThis invoice showcases structured content on a single page for detailed clarity.\u003c/p\u003e\n \u003ctable style=\"width:100%; border-collapse: collapse; margin: 10px 0; font-size: 14px;\"\u003e\n \u003ctr\u003e\n \u003cth style=\"border: 1px solid #ddd; padding: 8px; background-color: #f4f4f4;\"\u003eItem\u003c/th\u003e\n \u003cth style=\"border: 1px solid #ddd; padding: 8px; background-color: #f4f4f4;\"\u003eQuantity\u003c/th\u003e\n \u003cth style=\"border: 1px solid #ddd; padding: 8px; background-color: #f4f4f4;\"\u003ePrice\u003c/th\u003e\n \u003cth style=\"border: 1px solid #ddd; padding: 8px; background-color: #f4f4f4;\"\u003eTotal\u003c/th\u003e\n \u003c/tr\u003e\n ${Array.from({ length: 26 }).map((_, i) =\u003e {\n const price = (i + 1) * 10;\n const quantity = (i % 5) + 1;\n const total = price * quantity;\n return `\u003ctr\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px;\"\u003eProduct ${String.fromCharCode(65 + (i % 26))}\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right;\"\u003e${quantity}\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right;\"\u003e$${price}.00\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right;\"\u003e$${total}.00\u003c/td\u003e\n \u003c/tr\u003e`;\n }).join('')}\n \u003ctr\u003e\n \u003ctd colspan=\"3\" style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003eSubtotal\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003e$${Array.from({ length: 15 }).reduce((acc, _, i) =\u003e acc + ((i + 1) * 10 * ((i % 5) + 1)), 0)}.00\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd colspan=\"3\" style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003eVAT (20%)\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003e$${(Array.from({ length: 15 }).reduce((acc, _, i) =\u003e acc + ((i + 1) * 10 * ((i % 5) + 1)), 0) * 0.2).toFixed(2)}\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd colspan=\"3\" style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003eTotal\u003c/td\u003e\n \u003ctd style=\"border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;\"\u003e$${(Array.from({ length: 15 }).reduce((acc, _, i) =\u003e acc + ((i + 1) * 10 * ((i % 5) + 1)), 0) * 1.2).toFixed(2)}\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003cdiv class=\"p3x-template-page-break\"\u003e\u003c/div\u003e\n \u003cdiv\u003e\n \u003ch2 style=\"color: #222;\"\u003eAdditional Information\u003c/h2\u003e\n \u003cp style=\"font-size: 14px; color: #555;\"\u003eThis page provides further details about the invoice, payment methods, and terms. Below is a breakdown of important notes:\u003c/p\u003e\n \u003cul style=\"font-size: 14px; color: #555;\"\u003e\n \u003cli\u003ePayments are due within 30 days of receipt.\u003c/li\u003e\n \u003cli\u003eAccepted payment methods include credit card, bank transfer, and PayPal.\u003c/li\u003e\n \u003cli\u003ePlease ensure that all transactions reference the invoice number provided above.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp style=\"font-size: 14px; color: #555;\"\u003eIf you have any questions, feel free to contact our support team at \u003ca href=\"mailto:support@patrikx3.com\"\u003esupport@patrikx3.com\u003c/a\u003e.\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv class=\"np3x-template-page-break\"\u003e\u003c/div\u003e\n \u003cdiv\u003e\n \u003cp style=\"font-size: 14px; color: #555;\"\u003eThank you for your business! We hope to work with you again in the future. Stay tuned for updates on our services and offerings by visiting our website or subscribing to our newsletter.\u003c/p\u003e\n \u003c/div\u003e\n `,\n },\n title: 'P3X-HTML-PDF Detailed Invoice',\n debug: false,\n saveFile: outputPath,\n };\n\n try {\n await generate(options);\n console.log('βœ… PDF generated successfully!');\n\n // or\n options.settings.save = false\n const buffer = await generate(options);\n console.log('--------------------------------------------------------------')\n console.log('PDF Buffer:', buffer);\n\n } catch (err) {\n console.error('❌ Error generating PDF:', err);\n }\n})();\n```\n\n---\n\n## πŸ”§ Configuration\n\n### Options\n\n- **Settings**\n - `save`: If false, it returns as a buffer.\n - `template.format`: Page size, e.g., `A4`, `Letter`.\n - `template.orientation`: Page orientation (`portrait` or `landscape`).\n - `template.marginLeft`, `template.marginRight`: Margins in mm.\n - `template.copies`: Copies to generate.\n - `template.fixedWidth` and `template.fixedHeight`: If above zero, generates in millimeters.\n - `html`: HTML content with placeholders.\n- **title**: PDF document title.\n- **saveFile**: Path for saving the PDF.\n- **base** The HTML base href is other then current directory, it can be online as well.\n- **css**: Customize the CSS for serving, by default it is in `src/html-template.css`\n- **jquery**: The latest that works with webkit is jQuery v1.12.4 is required, you can extend with more functions, the default is in `src/jquery-1.12.4.min.js`\n- **javascriptDelay**: The delay before the PDF is generated as default is 1000 ms.\n\nFor more options, check the official [wkhtmltopdf usage guide](https://wkhtmltopdf.org/usage/wkhtmltopdf.txt). \n \nUnfortunately the version latest HTTPS TLS 1.3 is not working, so it is better to use inline filesystem images or using HTTP as that is dated but still works.\n\n### How to Add a Page Break with `p3x-html-pdf`\n\nTo insert a page break, simply use the following snippet:\n\n```html\n\u003cdiv class=\"p3x-template-page-break\"\u003e\u003c/div\u003e\n```\n\n#### βœ… Key Points:\n- πŸ”§ **No additional CSS** is required; the functionality is built-in.\n- πŸ“‘ The content after this `\u003cdiv\u003e` will automatically start on a new page.\n- 🧹 Ensure your HTML structure is clean for proper rendering.\n\n#### πŸ“ Example:\n```html\n\u003cdiv\u003e\n \u003cp\u003eπŸ“œ This content will be on the first page.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"p3x-template-page-break\"\u003e\u003c/div\u003e\n\n\u003cdiv\u003e\n \u003cp\u003eπŸ“œ This content will appear on the next page.\u003c/p\u003e\n\u003c/div\u003e\n```\n---\n\n## 🌟 Placeholders\n\nYou can use placeholders in your HTML for dynamic data (only these, but it is enough, the rest you can generate in HTML):\n\n- `${page}`: Current page.\n- `${pages}`: Total pages.\n- `${frompage}`: The starting page of the current section.\n- `${topage}`: The ending page of the current section.\n- `${webpage}`: The URL of the web page (if applicable).\n- `${section}`: The name of the current section.\n- `${subsection}`: The name of the current subsection.\n- `${date}`: The current date in a localized format.\n- `${isodate}`: The current date in ISO 8601 format.\n- `${time}`: The current time.\n- `${title}`: The document title.\n- `${doctitle}`: The title of the document as defined in metadata.\n- `${sitepage}`: Current site page number (specific context).\n- `${sitepages}`: Total number of site pages (specific context).\n\n### Example\n\n```html\n\u003cdiv id=\"p3x-footer\" data-height=\"10mm\"\u003e\n \u003cp\u003ePage ${page} of ${pages}\u003c/p\u003e\n\u003c/div\u003e\n```\n\nThe `p3x-footer` and `p3x-header` should not have any styles other than `id` and `data-height`. \n\n---\n\n## πŸ“Š Advanced Features\n\n- **Debugging**: Use `debug: true` to enable detailed logs.\n- **Header/Footer Templates**: Create rich HTML templates for headers/footers.\n- **Dynamic Content**: Inject dynamic tables, invoices, or other content into the PDF.\n\n---\n\n## 🌟 Headers and Footers in `p3x-html-pdf`\n\nThis document provides a detailed explanation of how to work with headers and footers using `p3x-html-pdf`, including first-page-specific headers and indexed headers for subsequent pages. With this approach, you can create professional-grade PDFs with precise control over header and footer content.\n\n---\n\n### πŸ“– Overview\n\nHeaders and footers in `p3x-html-pdf` are managed via HTML templates. You can:\n- Define **default headers and footers** for all pages.\n- Create **specific headers or footers** for certain pages using indexing (e.g., `p3x-header-1` for the first page).\n- Dynamically calculate content for headers and footers, such as page numbers, document titles, or custom logic.\n\n---\n\n### πŸš€ How It Works\n\n`p3x-html-pdf` uses the `id` attribute and `data-height` to manage headers and footers. The key attributes and elements are:\n\n- **Header IDs**:\n - `p3x-header`: The default header for all pages.\n - `p3x-header-\u003cpage\u003e`: A header for a specific page (e.g., `p3x-header-1` for the first page).\n - `p3x-header-last`: Last header for last page.\n- **Footer IDs**:\n - `p3x-footer`: The default footer for all pages.\n - `p3x-footer-\u003cpage\u003e`: A footer for a specific page.\n - `p3x-footer-last`: Last footer for last page.\n- **`data-height`**: Specifies the height of the header/footer (in millimeters). Ensure this matches the expected content size to prevent overlap.\n\n---\n\n### 🌟 Example: First Page Header and Default Header\n\nThe following example demonstrates a **custom header** for the first page and a **default header** for the rest of the document.\n\n#### HTML Template\n\n```html\n\u003cdiv id=\"p3x-header-1\" data-height=\"40mm\"\u003e\n \u003cdiv style=\"width: 100%; padding: 0px; display: table;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle;\"\u003e\n \u003cimg src=\"http://cdn.corifeus.com/assets/png/patrikx3.png\" alt=\"Header Logo\" style=\"height:40mm; margin:0;\"/\u003e\n \u003c/div\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right; width: 100%;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Invoice - First Page\u003c/h1\u003e\n \u003cp style=\"margin: 5px 0 0; font-size: 14px; color: #555;\"\u003eGenerated: ${new Date().toLocaleDateString()}\u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"p3x-header\" data-height=\"40mm\"\u003e\n \u003cdiv style=\"display: table; width: 100%; height: 40mm; text-align: right;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Invoice\u003c/h1\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"p3x-header-last\" data-height=\"40mm\" \u003e\n \u003cdiv style=\"display: table; width: 100%; height: 40mm; text-align: right;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Final Notes \u003c/h1\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"p3x-footer\" data-height=\"10mm\"\u003e\n \u003cdiv style=\"text-align: right; font-size: 12px; color: #777;\"\u003e\n Page ${page} of ${pages}\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n### πŸ› οΈ Dynamic Header and Footer Logic\n\n- Use indexed headers or footers for specific pages.\n- Utilize placeholders like `${page}` and `${pages}` to dynamically display the current page and total pages.\n\n#### Example Configuration in JavaScript\n\n```javascript\nconst options = {\n settings: {\n save: true,\n template: {\n format: 'A4',\n marginLeft: 10,\n marginRight: 10,\n orientation: 'portrait',\n },\n html: `\n \u003cdiv id=\"p3x-header-1\" data-height=\"40mm\"\u003e\n \u003c!-- Custom header for the first page --\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-header\" data-height=\"40mm\"\u003e\n \u003c!-- Default header for subsequent pages --\u003e\n \u003c/div\u003e\n \u003cdiv id=\"p3x-footer\" data-height=\"10mm\"\u003e\n \u003c!-- Footer for all pages --\u003e\n \u003c/div\u003e\n `,\n },\n title: 'Dynamic Headers and Footers Example',\n saveFile: path.resolve(__dirname, 'output.pdf'),\n};\n```\n\n---\n\n### πŸ“ Calculating Headers and Footers per Page\n\nWhen designing headers and footers:\n1. **Estimate Content Size:**\n - Use `data-height` to reserve enough space for your header or footer content.\n - Example: A header with a logo and text may need `40mm`.\n\n2. **Adjust Margins:**\n - Ensure the margins accommodate both the header/footer and the main content.\n\n3. **Testing for Multi-Page Documents:**\n - For multi-page documents, validate the alignment of headers and footers across all pages.\n\n---\n\n#### πŸ“„ Headers and Footers with Indexed Customization\n\n`p3x-html-pdf` supports indexed headers and footers, allowing unique designs for specific pages. For example, `p3x-header-1` can define a header for the first page, while `p3x-header` applies to subsequent pages. Similarly, `p3x-footer-1` can be used for a custom first-page footer.\n\n##### Key Points:\n1. **Indexed IDs**: Use `p3x-header-1`, `p3x-footer-1`, etc., for specific pages. Default headers (`p3x-header`) and footers (`p3x-footer`) are used when no specific index is found and there is `p3x-header-last` or `p3x-footer-last`.\n2. **Consistent Heights**: All headers and footers must share the same `data-height` (e.g., `40mm` for headers, `10mm` for footers) to ensure proper alignment and accurate page calculations.\n3. **Dynamic Content**: Use placeholders like `${page}` and `${pages}` to display page-specific data dynamically.\n\nThis approach allows tailored styling for specific pages while maintaining consistent layouts throughout the document.\n \n--- \n \n### πŸ“Š Advanced Features\n\n- Combine **indexed headers/footers** for specific pages with a **default** fallback.\n- Use JavaScript in the `header-footer.html` template to dynamically adjust content.\n- Use indexed configurations to simulate \"first-page\" or \"last-page\" behavior.\n\n---\n\n### πŸ–ΌοΈ Example Output\n\nYou can generate a PDF with the provided configuration to see how headers and footers are applied dynamically. For larger documents, this approach allows consistent styling with room for customization.\n\n\n## 🌍 Architecture\n\n`p3x-html-pdf` works seamlessly on Linux, Windows and ARM64.\n\n\n\n\n---\n\n## πŸ–ΌοΈ Example Output\n\nCheck out an example output PDF: \n[Example PDF](https://cdn.corifeus.com/git/html-pdf/assets/p3x-html-pdf-output.pdf).\n \n![Example Output](https://cdn.corifeus.com/git/html-pdf/assets/p3x-html-pdf-output.png) \n \n---\n\n## πŸ”¬ Legacy Rendering with Webkit\n\nThis library uses `wkhtmltopdf`, which relies on an older version of Webkit. As such, it does not support modern CSS features like `flexbox`. Instead, older solutions such as `float` and `table`-based layouts must be used for alignment. While these approaches are not modern, they are efficient and compatible with the rendering engine.\n\nFor instance, the following layout works seamlessly:\n\n```html\n\u003cdiv id=\"p3x-header\" data-height=\"40mm\"\u003e\n \u003cdiv style=\"width: 100%; padding: 0px; display: table;\"\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle;\"\u003e\n \u003cimg src=\"http://cdn.corifeus.com/assets/png/patrikx3.png\" alt=\"Header Logo\" style=\"height:40mm; margin:0;\"/\u003e\n \u003c/div\u003e\n \u003cdiv style=\"display: table-cell; vertical-align: middle; text-align: right; width: 100%;\"\u003e\n \u003ch1 style=\"margin: 0; font-size: 20px; color: #333;\"\u003eP3X HTML Invoice\u003c/h1\u003e\n \u003cp style=\"margin: 5px 0 0; font-size: 14px; color: #555;\"\u003eGenerated: 2023-10-01\u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n\n## Steps to Clone and Run `test/test.js`\n\n1. **Clone the Repository**:\n ```bash\n git clone https://github.com/patrikx3/html-pdf.git\n cd html-pdf\n ```\n\n2. **Install Dependencies**:\n Using Yarn:\n ```bash\n yarn install\n ```\n\n Or, using NPM:\n ```bash\n npm install\n ```\n\n3. **Run the Test Script**:\n ```bash\n node ./test/test.js\n ```\n---\n\n## Puppeteer vs. p3x-html-pdf: Resource Usage and Features Comparison\n\nWhen deciding between **Puppeteer** and **p3x-html-pdf**, it's essential to understand their differences in resource usage and capabilities.\n\n### Technology Difference\n\n- **p3x-html-pdf** is built on **wkhtmltopdf**, which uses the WebKit rendering engine. It's lightweight and optimized for HTML-to-PDF tasks.\n- **Puppeteer** launches a full **Chrome/Chromium** instance, consuming more CPU and memory, even in headless mode.\n\n### Resource Usage Comparison\n\n| Feature | p3x-html-pdf (wkhtmltopdf) | Puppeteer (Chrome/Chromium) |\n|------------------------|---------------------------------------------|------------------------------------------|\n| **Memory Usage** | Low | High |\n| **CPU Usage** | Low | High |\n| **Startup Time** | Fast | Slower due to browser launch |\n| **Dynamic Content** | Limited support for JavaScript | Full support for JavaScript |\n| **Rendering Accuracy** | Basic CSS and HTML support | Pixel-perfect rendering with modern web standards |\n| **Flexibility** | Headers, footers, scripts (older JS versions) | Highly customizable (headers, footers, scripts) |\n| **Scalability** | Suitable for lightweight tasks and servers | Better for advanced use cases and large-scale rendering |\n| **File Size** | Smaller binary for wkhtmltopdf dependency | Puppeteer requires downloading Chromium (~100MB) |\n\n### Trade-offs\n\n#### p3x-html-pdf (wkhtmltopdf)\n- **Pros:**\n - Lightweight and uses fewer resources.\n - Faster startup time.\n - Ideal for static HTML content with minimal JavaScript or CSS.\n\n- **Cons:**\n - Limited support for modern web standards and advanced JavaScript.\n - Basic rendering capabilities.\n\n#### Puppeteer\n- **Pros:**\n - Full support for dynamic content, advanced JavaScript, and modern web standards.\n - Highly customizable headers, footers, and PDF options.\n - Pixel-perfect rendering accuracy.\n\n- **Cons:**\n - Consumes more CPU and memory.\n - Slower startup time due to launching a full Chrome/Chromium instance.\n\n### When to Use Each\n\n#### Use p3x-html-pdf (wkhtmltopdf):\n- When your content is **static** or doesn’t rely on modern web technologies.\n- When resource efficiency is a priority (e.g., on resource-constrained servers).\n\n#### Use Puppeteer:\n- When your content is **dynamic** or relies heavily on JavaScript and CSS.\n- When rendering accuracy, modern web technology support, or customization is critical.\n\n### Conclusion\n\n- **p3x-html-pdf** (wkhtmltopdf) is a better fit for lightweight tasks with simple requirements.\n- **Puppeteer** excels in advanced and dynamic use cases but comes with higher resource costs.\n\n---\n\n**Happy PDF Generating!** πŸŽ‰\n\n[//]: #@corifeus-footer\n\n---\n\n## πŸš€ Quick and Affordable Web Development Services\n\nIf you want to quickly and affordably develop your next digital project, visit [corifeus.eu](https://corifeus.eu) for expert solutions tailored to your needs.\n\n---\n\n## 🌐 Powerful Online Networking Tool \n\nDiscover the powerful and free online networking tool at [network.corifeus.com](https://network.corifeus.com). \n\n**πŸ†“ Free** \nDesigned for professionals and enthusiasts, this tool provides essential features for network analysis, troubleshooting, and management. \nAdditionally, it offers tools for: \n- πŸ“‘ Monitoring TCP, HTTP, and Ping to ensure optimal network performance and reliability. \n- πŸ“Š Status page management to track uptime, performance, and incidents in real time with customizable dashboards. \n\nAll these features are completely free to use. \n\n---\n\n## ❀️ Support Our Open-Source Project \nIf you appreciate our work, consider ⭐ starring this repository or πŸ’° making a donation to support server maintenance and ongoing development. Your support means the world to usβ€”thank you! \n\n---\n\n### 🌍 About My Domains \nAll my domains, including [patrikx3.com](https://patrikx3.com), [corifeus.eu](https://corifeus.eu), and [corifeus.com](https://corifeus.com), are developed in my spare time. While you may encounter minor errors, the sites are generally stable and fully functional. \n\n---\n\n### πŸ“ˆ Versioning Policy \n**Version Structure:** We follow a **Major.Minor.Patch** versioning scheme: \n- **Major:** πŸ“… Corresponds to the current year. \n- **Minor:** πŸŒ“ Set as 4 for releases from January to June, and 10 for July to December. \n- **Patch:** πŸ”§ Incremental, updated with each build. \n\n**🚨 Important Changes:** Any breaking changes are prominently noted in the readme to keep you informed.\n\n---\n\n\n[**P3X-HTML-PDF**](https://corifeus.com/html-pdf) Build v2025.4.169\n\n [![NPM](https://img.shields.io/npm/v/p3x-html-pdf.svg)](https://www.npmjs.com/package/p3x-html-pdf) [![Donate for PatrikX3 / P3X](https://img.shields.io/badge/Donate-PatrikX3-003087.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QZVM4V6HVZJW6) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Like Corifeus @ Facebook](https://img.shields.io/badge/LIKE-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software)\n\n\n\n\n\n[//]: #@corifeus-footer:end\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrikx3%2Fhtml-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrikx3%2Fhtml-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrikx3%2Fhtml-pdf/lists"}