NX.Prind
— NexaPrind
NexaPrind adalah kelas JavaScript untuk mencetak elemen HTML (berdasarkan id atau
selector CSS) dengan opsi kertas, margin, font, jendela baru, dan penangkapan gaya.
API: new NX.Prind() (alias kelas NexaPrind di NX). Untuk byte ESC/POS /
printer thermal: NX.Escpos.
Metode dasar
1. Cetak berdasarkan ID
const NexaPrind = new NX.Prind();
NexaPrind.printById("myElement");
NexaPrind.printById("myElement", {
title: "Dokumen Saya",
paperSize: "A4",
orientation: "portrait",
});2. Cetak berdasarkan CSS selector
NexaPrind.printBySelector(".print-content");
NexaPrind.printBySelector("#content", {
title: "Laporan",
paperSize: "A4",
});Contoh HTML ringkas
<div id="printArea">
<h1>Judul Dokumen</h1>
<p>Konten yang akan dicetak.</p>
</div>
<button onclick="cetakDokumen()">Cetak</button>const NexaPrind = new NX.Prind();
window.cetakDokumen = function () {
NexaPrind.printById("printArea", {
title: "Dokumen Saya",
paperSize: "A4",
orientation: "portrait",
});
};Contoh HTML lengkap: assets/modules/Prind/NexaPrind-Example.html.
Opsi konfigurasi
Objek opsi kedua pada printById / printBySelector (semua opsional kecuali dinyatakan):
| Opsi | Keterangan |
|---|---|
title |
Judul dokumen (window / print job). |
captureDynamicStyles |
Tangkap gaya dinamis dari elemen (default disarankan true di md). |
forceBackgrounds |
Paksa background warna/gambar saat print. |
preserveLayout |
Pertahankan layout asli. |
skipBrokenResources |
Lewati resource rusak (gambar 404, dll.). |
useFallbackFonts |
Gunakan font fallback. |
optimizePerformance |
Batasi jumlah elemen yang diproses untuk performa. |
newWindow |
true = buka di window baru; false = window saat ini. |
removeAfterPrint |
Tutup window otomatis setelah print. |
styleNot |
Array selector yang dikecualikan dari capture style (mis. ['.no-print']). |
paperSize |
A4, A3, A5, Letter, Legal, Custom. |
orientation |
portrait | landscape. |
customSize |
{ width, height } jika paperSize: "Custom" (mis. "210mm"). |
margins |
Margin umum: "0", "10", "20mm", "none", dll. |
marginTop / Right / Bottom / Left |
Margin per sisi (string angka atau "20mm"). |
fontSize |
Mis. "12pt". |
fontFamily |
null = default, atau mis. "Arial, sans-serif". |
lineHeight |
Mis. "1.2". |
NexaPrind.printById("myElement", {
title: "Print Document",
captureDynamicStyles: true,
forceBackgrounds: true,
preserveLayout: true,
skipBrokenResources: true,
useFallbackFonts: true,
optimizePerformance: true,
newWindow: false,
removeAfterPrint: false,
styleNot: [],
paperSize: "A4",
orientation: "portrait",
customSize: { width: "210mm", height: "297mm" },
margins: "0",
marginTop: "20",
marginRight: "15",
marginBottom: "20",
marginLeft: "15",
fontSize: "12pt",
fontFamily: null,
lineHeight: "1.2",
});Contoh praktis
Sederhana
NexaPrind.printById("content");Kertas & margin
NexaPrind.printById("laporan", {
title: "Laporan Bulanan",
paperSize: "A4",
orientation: "portrait",
margins: "20mm",
});Landscape + margin custom
NexaPrind.printById("chart", {
title: "Grafik Data",
paperSize: "A4",
orientation: "landscape",
marginTop: "15mm",
marginRight: "10mm",
marginBottom: "15mm",
marginLeft: "10mm",
});Font custom
NexaPrind.printById("dokumen", {
title: "Dokumen Resmi",
fontSize: "11pt",
fontFamily: "Times New Roman, serif",
lineHeight: "1.5",
paperSize: "A4",
});styleNot
NexaPrind.printById("content", {
title: "Dokumen",
styleNot: [".tcx-center", ".tcx-footer", ".no-print-style"],
});Window baru + tutup setelah print
NexaPrind.printById("content", {
title: "Preview Print",
newWindow: true,
removeAfterPrint: true,
});Ukuran kertas custom
NexaPrind.printById("content", {
title: "Dokumen Custom",
paperSize: "Custom",
customSize: { width: "210mm", height: "297mm" },
orientation: "portrait",
});Hanya selector
NexaPrind.printBySelector(".print-this", {
title: "Dokumen",
paperSize: "A4",
});
NexaPrind.printBySelector("#main-content .article", {
title: "Artikel",
fontSize: "12pt",
lineHeight: "1.4",
});Catatan penting
- Tabel: styling elemen tabel (
table,tr,td, …) dijaga agar layout tidak rusak. - Heading:
h1–h6memakai ukuran natural kecuali dikecualikan lewatstyleNot. styleNot: mengecualikan elemen tertentu dari capture style.- Performa: untuk DOM besar, pertahankan
optimizePerformance: true(sesuai rekomendasi md). - Browser: untuk import/export ESM, gunakan browser yang mendukung modul.
Troubleshooting
Elemen tidak ditemukan — pastikan node ada sebelum print:
if (document.getElementById("myElement")) {
NexaPrind.printById("myElement");
} else {
console.error("Elemen tidak ditemukan!");
}Pop-up diblokir — dengan newWindow: true, izinkan pop-up untuk domain Anda.
Styling tidak sesuai — cek captureDynamicStyles, konflik CSS, dan styleNot.
Berkas implementasi
assets/modules/Prind/NexaPrind.js; contoh & keunggulan:
NexaPrind-Example.html, NexaPrind-Advantages.md. Ekspor agregat:
assets/modules/nxdom.js (NexaPrind, alias NX.Prind).
Default nilai opsi di runtime mengikuti implementasi
NexaPrind.js; sesuaikan cuplikan jika API berubah.