← dompdf.js Studio

Contract PDF Generation in Browser: Frontend Solution

OA systems and legal platforms need to export contracts as properly formatted PDFs: headers and footers, paginated clauses, and a signature area at the end. dompdf.js handles all of this on the frontend — no backend rendering service required, contracts are generated and downloaded instantly.

Contract PDF Formatting Requirements

Formal contracts have strict layout requirements: margins, clause numbering, footer page numbers, and signature areas.

dompdf.js supports @page paged media properties for precise control over margins, running headers/footers, and page numbers.

Long clause lists paginate automatically with continuous page numbers in the footer.

Code Example

const contractHTML = `
  <style>
    @page { margin: 25mm 20mm; }
    .clause { margin-bottom: 12px; }
  </style>
  <h2 style="text-align:center">Software Service Agreement</h2>
  <p class="clause"><b>Article 1</b> Scope of Services: ...</p>
  <p class="clause"><b>Article 2</b> Payment Terms: ...</p>
  <div style="margin-top:80px;text-align:center">
    <img src="/seal.png" width="120">
    <p>Party A: ____  Party B: ____</p>
  </div>`;

const pdf = new DomPDF();
pdf.addPage(contractHTML, { format: 'A4' });
pdf.save('contract.pdf');

Handling Signatures

An electronic seal is just a transparent PNG placed in the signature area.

Store contract templates as HTML strings and fill in clause content dynamically.

Output is vector PDF — signatures stay crisp at any scale.

⚡ 现场演示(点击生成 PDF)

下面的按钮用 dompdf.js 在浏览器端实时生成 PDF,无需后端:

Hello from dompdf.js!

这是由 dompdf.js 渲染的示例 PDF 内容。