json-pdf-designer: an open-source PDF report designer you actually own the code of

Описание и применение

json-pdf-designer позволяет создавать PDF‑отчёты в React, редактируя шаблоны напрямую в коде, связывая поля с JSON‑данными и генерируя PDF как в браузере, так и на сервере без headless‑браузеров.

Задача

Visual PDF designer libraries for React often lock users into plugin systems and declarative schemas, making customizations difficult when requirements change.

Результат

Developers can now design PDF reports directly in source code, bind fields to JSON data, generate multi‑page PDFs on both client and server, and avoid headless browsers.

Рабочий процесс

• Install json-pdf-designer via npm
• Import Designer, generatePdf, downloadPdf, and types into a React component
• Create state for template and bindings
• Render <Designer> with template and bindings props
• Add a button that calls handleGenerate to fetch data, generate PDF bytes, and download the file
• For server‑side use, import generatePdf from json-pdf-designer/server and call it with template, data, and bindings

Доказательства

The moment you need something they didn't anticipate, you're stuck.

Источник

PDF generation is plain JS (pdf-lib) — the exact template designed in the browser generates on a Node backend too, no headless browser required

Источник

Generate PDF button example code

Источник