HTML → PDF

DgHtmlToPdfService.convert(html) dùng jspdf + html2canvas (dynamic import, ~250 kB lazy chunk). DgPdfPreview render Blob trong iframe và cung cấp nút Download. Lưu ý: bản PDF là raster — text không select được.

Layout
Image
Metadata
Output
HTML source2339 chars
Rendered HTMLlive preview · 250ms debounce
dungeon-a4.pdf
no document

Chưa có PDF — nhấn Convert để xem preview.

Nhấn Convert → PDF để tạo preview.

Directive [dgPdfSource] — convert live element trên template

Đánh dấu một element bất kỳ với dgPdfSource; reference qua template var (#pdf="dgPdfSource") rồi gọi pdf.download() / pdf.toBlob() từ click handler — không cần inject service thủ công. Mỗi lần gọi capture HTML hiện tại của element, nên signals / form values / async data đã render đều được pickup.

Thẻ hoá đơn live · 13/5/2026

Counter: 3

Click Tăng counter rồi Download as PDF — số trong PDF sẽ là giá trị counter ngay khi convert (không bị stale).

Tiền hàng750,000 ₫
Tổng cộng750,000 ₫
<div [dgPdfSource]="{ margin: 15, quality: 0.9 }"
     filename="card-sample.pdf"
     #pdfCard="dgPdfSource">
  <h3>Thẻ hoá đơn live · {{ now }}</h3>
  <p>Counter: <strong>{{ cardCounter() }}</strong></p>
</div>

<dg-button label="Download as PDF" (clicked)="pdfCard.download()" />
<dg-button label="Email PDF"        (clicked)="email(pdfCard)" />
```
```ts
async email(src: DgPdfSource) {
  const blob = await src.toBlob({ quality: 0.95 });
  await this.api.sendInvoice(blob);
}