Berikut merupakan contoh aplikasi printJS pada html
source PrintJs .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity_no="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity_no="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
</head>
<body>
<div class="container">
<div class="invoice" id="invoice">
<div style="display: flex;flex-direction: column;">
<h3>Invoice</h3>
<p>Penjualan dan pembelian harian karyawan</p>
</div>
<table class="table table-sm table-bordered table-condensed">
<thead>
<tr class="active">
<th>No</th>
<th>Nama</th>
<th>Pretty</th>
</tr>
</thead>
<tbody>
<tr>
<td>No</td>
<td>Nama</td>
<td>Pretty</td>
</tr>
<tr>
<td>No</td>
<td>Nama</td>
<td>Pretty</td>
</tr>
<tr>
<td>No</td>
<td>Nama</td>
<td>Pretty</td>
</tr>
</tbody>
</table>
<p>Invoice Barang</p>
</div>
<button class="btn btn-primary" id="btn">Print</button>
</div>
<script>
const printJs=window["printJS"]
document.getElementById('btn').onclick=function(){
printJs({
printable:'invoice',
type: 'html',
honorColor:true,
font_size:'11px',
css:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
modalMessage:"Silakan print invoice anda",
documentTitle:"invoice example"
})
}
</script>
</body>
</html>
berikut beberapa propery yang digunakan untuk untuk memprint html ke canvas
-
printable :(string)
properti yang akan menandakan dari mana sumber data yang akan diprint ,options yang disediaka .misalnya memilih type HTML maka yang digunakan adalah id element yang akan print ,jika pilih JSON maka yang digunakan adalah nama file misalnya MyJson
-
type :(string)
memilih data yang akan di print bertipe apa misal HTML akan merender html untuk di print .
-
font_size:(string)
menentukan ukuran font pada canvas print misalnya '12px'
-
css : (string)
jika menggunkan style external untuk melakukan styling pada canvas yang akan print sepety pada contoh diatasa
-
modalMessage: (string)
pesan yang dapat ditampikan pada canvar print
-
documentTitle :(string)
menampilkan title pada canvar yang akan print
pada crhome dan firefox menunjukan hasil yang cukup berbeda dimana render style tidak begitu signifikan pada firefox sedangkan pada chrome beberapa style bawaan pada style html dapat di render pada canvar print
Hasil pada crhome
Hasil pada firefox