Render Options
Class RenderOptions adalah value object immutable yang mengontrol bagaimana Chrome me-render HTML Anda ke PDF. Setiap setter mengembalikan instance baru, menjaga konfigurasi Anda tetap terprediksi dan bebas side-effect.
Membuat Options
use Yeeefang\TcpdfNext\Artisan\RenderOptions;
// Mulai dengan default yang masuk akal
$options = RenderOptions::create();
// Bangun konfigurasi secara fluent
$options = RenderOptions::create()
->setPageSize('A4')
->setMargins(top: 15, right: 10, bottom: 15, left: 10)
->setPrintBackground(true);2
3
4
5
6
7
8
9
10
Menerapkan Options
Berikan RenderOptions yang sudah dikonfigurasi ke HtmlRenderer::withOptions().
use Yeeefang\TcpdfNext\Artisan\HtmlRenderer;
use Yeeefang\TcpdfNext\Artisan\RenderOptions;
HtmlRenderer::create()
->loadHtml('<h1>Configured Output</h1>')
->withOptions($options)
->save('/output/configured.pdf');2
3
4
5
6
7
Ukuran Halaman
Set format kertas menggunakan nama format standar.
$options = RenderOptions::create()
->setPageSize('A4'); // 210 x 297 mm (default)2
Format yang didukung: A0--A6, B0--B6, Letter, Legal, Tabloid, Ledger.
Orientasi
$options = RenderOptions::create()
->setPageSize('A4')
->setLandscape(true); // 297 x 210 mm2
3
Margin
Set margin individual dalam milimeter.
$options = RenderOptions::create()
->setMargins(
top: 20,
right: 15,
bottom: 20,
left: 15,
);2
3
4
5
6
7
Saat template header atau footer diaktifkan, margin atas dan bawah mendefinisikan ruang yang dicadangkan untuk mereka.
Skala
Kontrol faktor skala rendering. Nilai berkisar dari 0.1 sampai 2.0, dengan 1.0 sebagai default (100%).
// Perkecil konten ke 80%
$options = RenderOptions::create()
->setScale(0.8);
// Perbesar konten ke 120%
$options = RenderOptions::create()
->setScale(1.2);2
3
4
5
6
7
Header dan Footer
Chrome CDP mendukung template HTML untuk header dan footer. Template memiliki akses ke class CSS khusus yang digantikan Chrome dengan nilai dinamis saat render.
Class CSS yang Tersedia
| Class CSS | Diganti Dengan |
|---|---|
.date | Tanggal cetak yang diformat |
.title | Judul dokumen |
.url | URL dokumen |
.pageNumber | Nomor halaman saat ini |
.totalPages | Jumlah total halaman |
Template Header
$options = RenderOptions::create()
->setDisplayHeaderFooter(true)
->setMargins(top: 25, right: 10, bottom: 20, left: 10)
->setHeaderTemplate('
<div style="font-size: 9px; width: 100%; padding: 0 10mm; display: flex; justify-content: space-between;">
<span>Acme Corp -- Confidential</span>
<span class="date"></span>
</div>
');2
3
4
5
6
7
8
9
Template Footer
$options = RenderOptions::create()
->setDisplayHeaderFooter(true)
->setMargins(top: 15, right: 10, bottom: 25, left: 10)
->setFooterTemplate('
<div style="font-size: 9px; width: 100%; text-align: center; color: #999;">
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>
');2
3
4
5
6
7
8
Header dan Footer Gabungan
$options = RenderOptions::create()
->setPageSize('A4')
->setMargins(top: 25, right: 15, bottom: 25, left: 15)
->setDisplayHeaderFooter(true)
->setHeaderTemplate('
<div style="font-size: 9px; width: 100%; padding: 0 15mm; display: flex; justify-content: space-between; border-bottom: 1px solid #e0e0e0; padding-bottom: 5px;">
<span style="font-weight: bold;">Quarterly Report</span>
<span class="date"></span>
</div>
')
->setFooterTemplate('
<div style="font-size: 8px; width: 100%; padding: 0 15mm; display: flex; justify-content: space-between; color: #888;">
<span>Acme Corporation</span>
<span>Page <span class="pageNumber"></span> / <span class="totalPages"></span></span>
</div>
');2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Pencetakan Background
Secara default, Chrome menghilangkan warna dan gambar background (sesuai perilaku dialog print browser). Aktifkan rendering background secara eksplisit.
$options = RenderOptions::create()
->setPrintBackground(true);2
CSS Rule @page
Saat diaktifkan, CSS rule @page dalam HTML Anda meng-override ukuran halaman dan margin yang dikonfigurasi di RenderOptions.
$options = RenderOptions::create()
->setPreferCssPageSize(true);2
HTML Anda kemudian bisa mengontrol layout:
@page {
size: A3 landscape;
margin: 10mm;
}2
3
4
Menunggu Konten
Menunggu DOM Selector
Tunda rendering sampai elemen tertentu muncul di DOM. Berguna saat JavaScript menghasilkan konten secara dinamis.
$options = RenderOptions::create()
->setWaitForSelector('#chart-rendered');2
Timeout
Set waktu maksimum (dalam milidetik) untuk menunggu page load dan rendering. Default ke 30000 (30 detik).
$options = RenderOptions::create()
->setTimeout(60000); // 60 detik untuk halaman berat2
Jika timeout terlampaui, TimeoutException dilempar.
Contoh Lengkap
use Yeeefang\TcpdfNext\Artisan\HtmlRenderer;
use Yeeefang\TcpdfNext\Artisan\RenderOptions;
$options = RenderOptions::create()
->setPageSize('Letter')
->setLandscape(false)
->setMargins(top: 25, right: 15, bottom: 25, left: 15)
->setScale(1.0)
->setPrintBackground(true)
->setDisplayHeaderFooter(true)
->setHeaderTemplate('
<div style="font-size: 9px; width: 100%; text-align: center;">
Internal Document -- Do Not Distribute
</div>
')
->setFooterTemplate('
<div style="font-size: 8px; width: 100%; text-align: center; color: #999;">
<span class="pageNumber"></span> / <span class="totalPages"></span>
</div>
')
->setWaitForSelector('.content-ready')
->setTimeout(45000);
HtmlRenderer::create()
->loadUrl('https://dashboard.example.com/export')
->withOptions($options)
->save('/exports/dashboard.pdf');2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Langkah Selanjutnya
- HTML Renderer -- Memuat konten dari string, file, dan URL.
- Fitur Lanjutan -- Penggabungan PDF, injeksi CSS, screenshot.