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

说明与用途

json-pdf-designer 允许在 React 中通过直接编辑源代码中的模板来创建 PDF 报告，绑定字段到 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

来源