@benpley/wappler-html2pdf

v2.0.0

Published

10 days ago

Convert HTML to PDF using Playwright Chromium in Wappler Server Connect

Downloads

325

0High
0Medium
0Low

benpley

wappler-extension server-connect module pdf html playwright node

HTML to PDF — Wappler Server Connect Module

This Wappler Server Connect module converts HTML content into PDF files using Playwright Chromium.
It is ideal for generating invoices, reports, onboarding documents, certificates, or any printable HTML content.

Features

Convert any HTML string into a PDF file
Fully server‑side rendering using Playwright Chromium
Supports:
- Page formats (A4, Letter, Legal, etc.)
- Margins and scaling
- Landscape or portrait orientation
- Background graphics
- Header and footer HTML templates
- CSS @page support (via preferCSSPageSize)
Advanced rendering controls:
- Wait for a selector before generating
- Optional delay for dynamic content
Save PDFs to a custom path or temporary folder
Works seamlessly inside Wappler NodeJS projects

🚨 Important: Playwright Browser Install

Playwright does not bundle its browser binaries the same way Puppeteer does. After installing dependencies, the Chromium browser used for rendering must be downloaded:

npx playwright install --with-deps chromium

A postinstall script running this command is included in package.json, but on some hosts (locked-down CI, limited permissions) you may need to run it manually.

Installation

Install Wappler HTML to PDF using Wappler's built-in Extension Manager:

Open Wappler and go to Extensions → Extension Manager.
Search for wappler-html2pdf or browse the Widgets category.
Click Install next to Wappler HTML to PDF by Ben Pleysier.
Restart Wappler (or reload your project) when prompted.
Ensure the Playwright Chromium browser is installed (see above), otherwise PDF generation will fail with a "browser executable not found" error.

Quick Example

Add the HTML to PDF action to a Server Connect action file with options like:

{
  "html": "<h1>Invoice #{{$_GET.id}}</h1><p>Thank you for your purchase, {{$_GET.name}}!</p>",
  "filename": "invoice_{{$_GET.id}}.pdf",
  "path": "uploads/invoices/invoice_{{$_GET.id}}.pdf",
  "format": "A4",
  "landscape": false,
  "printBackground": true,
  "marginTop": "10mm",
  "marginBottom": "10mm"
}

The action returns:

{
  "path": "/uploads/invoices/invoice_123.pdf",
  "filename": "invoice_123.pdf",
  "size": 24531
}

You can then use sc_action.data.path (or the step's output name) on the client to show a download link, e.g. <a dmx-bind:href="sc_action.data.path" target="_blank">Download PDF</a>.

Configuration Options

HTML Content

html (required) — The HTML string to convert into PDF.

PDF Output

filename — Output filename (default: document.pdf)
path — Optional save path (e.g., uploads/pdfs/report.pdf)

Page Settings

format — A4, A3, A5, Letter, Legal, Tabloid
landscape — true or false
printBackground — Print background graphics (default: true)
scale — Rendering scale (0.1 to 2, default: 1)

Margins

marginTop, marginRight, marginBottom, marginLeft
Accepts units like mm, cm, or in.

Header & Footer

displayHeaderFooter — Enable header/footer rendering
headerTemplate — HTML template for header
footerTemplate — HTML template for footer
(Playwright requires full HTML fragments: <html><body>...</body></html>)

Advanced

preferCSSPageSize — Use CSS-defined page size if present
waitForSelector — Wait for a specific element before generating
waitTime — Additional delay (ms) before PDF generation

All properties support static values or Wappler server data bindings.

Dependency

This module uses Playwright (Chromium engine).

Troubleshooting

"browser executable not found" / "Executable doesn't exist"

Playwright's Chromium binary is not installed. Run:

npx playwright install --with-deps chromium

See Playwright Browser Install above.

PDF is generated but blank / missing content

The HTML is likely rendered before dynamic content (JS/images/fonts) finishes loading.
Use waitForSelector to wait for a specific element that indicates the content is ready.
Or use waitTime to add a fixed delay (in milliseconds) before the PDF is captured.

Background colors/images are missing

Ensure printBackground is set to true (default).
Some CSS backgrounds also require -webkit-print-color-adjust: exact; in your stylesheet.

Header/footer not showing

Make sure displayHeaderFooter is enabled.
headerTemplate/footerTemplate must be full HTML fragments (e.g. <div style="font-size:10px;">...</div>), not just text.

Error: "Failed to generate PDF: ..." on shared hosting / containers

Chromium sandboxing can fail in restricted environments (Docker, some CI/CD, low-privilege containers).
The module already launches with --no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage --disable-gpu, but you may also need to install missing system dependencies with npx playwright install-deps (Linux).

Custom `path` not saving where expected

Custom paths are relative to the project root, not /public. Directories are created automatically if missing.

Issues and Support

For bug reports, feature requests, or assistance, please use the Wappler Community Forum.

If this module saves you time or makes your Wappler workflow easier, you can support me at

Version 2.0.0 — now powered by Playwright (migrated from Puppeteer). Feedback welcome!