Menjana Laporan Pdf – Javascript Lib – JSPDF
Assalamualaikum wbt
Hari ni saya berkongsi kaedah atau cara menggunakan satu lib javascript percuma untuk menjana laporan format pdf dengan mudah. lib ni boleh digunakan untuk sebarang jenis bahasa pengaturcaraan web – jsp,php,laravel,ci dll.
1. Dimana lib ini digunakan ???
ada 2 cara kaedah kita untuk memanggil lib jspdf ini iaitu call dari cdn dan download /pindah turun secara local web server.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js”></script>
atau
pindah turun di github
https://github.com/parallax/jsPDF
** Extrak dan letakkan files ini bersama files kod program utama
& cara panggil ada path pd files lib ini. contoh
<script src=”js/jspdf.min.js“></script>
2. Sampel Kod Program
Ini kod sampel program yang saya bangunkan menggunakan php mysql.
– Letakkan panggilan lib ini di header files kod program
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js”></script>
atau
<script src=”js/jspdf.min.js”></script>
& juga files script yang memanggil objek kelas lib jspdf (biasa di letakkan di bahagian bawh kod program)
<script>
function demoFromHTML() {
var pdf = new jsPDF(‘p’, ‘pt’, ‘letter’);
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $(‘#customers’)[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. (“#iAmID”, “div”, “span” etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of “bypass” – jQuery style selector
‘#bypassme’: function (element, renderer) {
// true = “handled elsewhere, bypass text extraction”
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance’s declared units
// ‘inches’ in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
‘width’: margins.width, // max width of content on PDF
‘elementHandlers’: specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save(‘Test.pdf’);
}, margins);
}
</script>
ok..kod program yang lengkap adalah seperti di bwh
nama files : pdf.php
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<!–script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js”></script–>
<script src=”js/jspdf.min.js”></script>
<?php
$con = new mysqli(“localhost”,”root”,”qwerty”,”jspdfdb”);
$sql = “select * from pdftab”;
$query = $con->query($sql);
$data = array();
while($r=$query->fetch_object()){
$data[] =$r;
}
?>
<div id=”customers”>
<table id=”tab_customers” class=”table table-striped”>
<colgroup>
<col width=”20%”>
<col width=”20%”>
<col width=”20%”>
<col width=”20%”>
</colgroup>
<thead>
<tr class=’warning’>
<th>id</th>
<th>nama</th>
</tr>
</thead>
<tbody>
<?php foreach($data as $d):?>
<tr>
<td>
<?php echo $d->id; ?>
</td>
<td>
<?php echo $d->nama; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<button onclick=”javascript:demoFromHTML();”>PDF</button>
<script>
function demoFromHTML() {
var pdf = new jsPDF(‘p’, ‘pt’, ‘letter’);
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $(‘#customers’)[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. (“#iAmID”, “div”, “span” etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of “bypass” – jQuery style selector
‘#bypassme’: function (element, renderer) {
// true = “handled elsewhere, bypass text extraction”
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance’s declared units
// ‘inches’ in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
‘width’: margins.width, // max width of content on PDF
‘elementHandlers’: specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save(‘Test.pdf’);
}, margins);
}
</script>
jadi kita untuk melihat output pdf yang dijana kita akan panggil dari browser. Pastikan web server adalah running.
http://localhost/jspdf/pdf.php
& paparan adalah spt ini dengan query simple dari database.
apabila tekan butang ‘pdf’, files janaan format pdf akan dihasilkan seperti ini.
Ok.berjaya menghasilkan files pdf.
Selamat Mencuba
Recent Comments