PDF
Click Preview to render PDF
| Syntax | Description |
|---|---|
{{fieldName}} | แสดงค่า field |
{{obj.field}} | แสดงค่า nested field |
{{#each items}}...{{/each}} | วน loop array |
{{#if field}}...{{/if}} | แสดงเมื่อ field มีค่า |
{{#if field}}...{{else}}...{{/if}} | if/else |
| Helper | Usage | Result |
|---|---|---|
| formatMoney | {{formatMoney 2025.5}} | 2,025.50 |
| eq | {{#if (eq status "paid")}} | เท่ากัน |
| gt / lt | {{#if (gt amount 1000)}} | มากกว่า / น้อยกว่า |
| json | {{json data}} | JSON string |
ส่ง object ที่มี barcodeData → service จะเพิ่ม barcodeImg (base64 PNG) ให้อัตโนมัติ
// Data
{ "myBarcode": { "barcodeData": "ABC123", "barcodeType": "code128" } }
// Template
{{#if myBarcode.barcodeImg}}
<img src="{{myBarcode.barcodeImg}}" />
{{/if}}
<div>{{myBarcode.barcodeData}}</div>
barcodeType: code128 (default), code39, ean13, ean8, upca, upce, itf14, interleaved2of5, gs1-128, isbn, pdf417, azteccode, datamatrix
barcodeOptions: { scale, height, width, includeText }
ส่ง object ที่มี qrData → service จะเพิ่ม qrcodeImg (base64 PNG) ให้อัตโนมัติ
// Data
{ "myQr": { "qrData": "https://example.com", "qrOptions": { "width": 200 } } }
// Template
{{#if myQr.qrcodeImg}}
<img src="{{myQr.qrcodeImg}}" />
{{/if}}
qrOptions: { width (default:150), margin (default:1), errorCorrectionLevel: L/M/Q/H (default:M) }
Upload ไฟล์รูปผ่านปุ่ม Assets ใน toolbar แล้วใช้ {{ASSET:filename}} ใน template — service จะแปลงเป็น base64 data URI ให้อัตโนมัติ
<img src="{{ASSET:logo.png}}" style="width:80px;" />
<img src="{{ASSET:stamp.png}}" />
<!-- ใช้เป็น background ได้เช่นกัน -->
<div style="background-image: url({{ASSET:watermark.png}});"></div>
รองรับ: .png, .jpg, .jpeg, .gif, .svg, .webp, .ico, .bmp
ขนาดจำกัด: สูงสุด 2MB ต่อไฟล์
อัพโหลดไฟล์ JS/CSS ผ่าน Scripts ใน toolbar แล้วใช้ /scripts/filename — Chromium จะ cache ไว้หลัง request แรก ทำให้ HTML เล็กและ render เร็ว
<!-- JS — อัพโหลดผ่าน Scripts แล้วอ้างด้วย /scripts/filename --> <script src="/scripts/tailwind-cdn.js"></script> <!-- CSS --> <link rel="stylesheet" href="/scripts/custom-theme.css" />
สำคัญ: ต้องตั้ง "waitForNetwork": true ใน PDF Options เพื่อให้รอโหลด script/css ก่อน generate PDF
หมายเหตุ: {{SCRIPT:filename}} ยังใช้ได้ (embed เป็น data URI) แต่ HTML จะใหญ่กว่าและ render ช้ากว่า
@font-face {
font-family: 'Sarabun';
src: url({{FONT:sarabun-thai-400.woff2}}) format('woff2');
}
| Field | Description |
|---|---|
| {{printDate}} | วันที่พิมพ์ dd/mm/yyyy (พ.ศ.) — auto inject |
| barcodeImg | auto generate ใน object ที่มี barcodeData |
| qrcodeImg | auto generate ใน object ที่มี qrData |
{
"format": "A4", // A4, A3, Letter, Legal
"landscape": false,
"printBackground": true,
"waitForNetwork": false, // true = wait for external resources (script/css/images via URL) to load
// false = fast mode, use when no external URLs in template (default)
"margin": { "top": "0", "bottom": "0", "left": "0", "right": "0" }
}
{{ASSET:filename}} in template