Convert HTML ke PDF

  • Posted on: September 2, 2019
  • By:

Dalam pengembangan aplikasi web kita berbicara sebuah visualisasi  data. Nah seperti halnya kali ini, kita akan memvisualisasikan data berupa halaman web dalam bentuk php  sehingga dapat di download dan juga di cetak atau di print oleh klien yang menghakses web kita.

 

Convert HTML ke PDF

Untuk mengconvert atua mengkonversi sebuah halaman web html dapat menggunakan script php. Script php yang ada pun sudah banyak tersebar di internet yaitu berupa fungsi fungsi yang langsung dapat kita gunakan.

Contoh fungsi-funsi itu misalnya fpdf, dompdf, html2pdf, dan masih banyak lagi lainya.

Nah kali ini Saya ingin membagikan tips dan trik membuat html atau halaman web dengan data yang bersisi script php memanggil database menjadi halaman pdf tanpa menggunakan fungsi-fungsi diatas.

Kelebihannya yaitu kita tanpa perlu terbebani dengan fungsi yang kadang memberatkan load halaman web kita.

Untuk membuatnya Kamu hanya perlu memperhatikan kedua script php dan hatml berikut ini:

1.Kartu.html

Contoh kartu peserta

Contoh kartu peserta

<div class=”row”>                    <div class=”col-lg-12″>                        <h1 class=”page-head-line”><?php echo strtoupper($a);?></h1>                    </div>                </div>                <div class=”row”>    <div class=”col-lg-8″> <div class=”panel panel-default”> <form action=”kartu.php” method=”POST” target=”_blank”> <div class=”panel-body”> <div class=”col-lg-12″> <table class=”table”> <tr> <td rowspan=”6″> <img src=”<?php echo $site;?>/assets/file/<?php echo $r->foto;?>” height=”190px”width=”170px”> </td> <td>ID Peserta</td> <td><?php echo $r->idKaryawan;?></td> </tr> <tr> <td>Nama</td> <td><?php echo $r->namaKaryawan;?></td> </tr> <tr> <td>Jenis Kelamin</td> <td><?php $jk=array(1=>’Pria’,2=>’Wanita’); echo $jk[$r->jenisKelamin];?></td> </tr> <tr> <td>Telp</td> <td><?php echo $r->telpKaryawan;?></td> </tr> <tr> <td>Alamat</td> <td><?php echo $r->alamatKaryawan;?></td> </tr> <tr> <td>Formasi</td> <td><?php echo $r->formasi;?></td> </tr> </table>      </div> </div> <div class=”panel-footer”>    <a href=”<?php echo $site.$m;?>” class=”btn btn-primary”>Kembali</a>    <input type=”submit” name=”profil” class=”btn btn-primary” value=”Download”> </div> </form> </div> </div> </div>                                       </div>            <!– /. PAGE INNER  –>

2.Kartu.php

Conver html ke pdf

Conver html ke pdf

<!DOCTYPE html><html xmlns=”http://www.w3.org/1999/xhtml”><head>    <meta charset=”utf-8″ />    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />    <title>SELAMAT DATANG</title>    <!– BOOTSTRAP STYLES–>    <link href=”<?php echo $site;?>assets/css/bootstrap.css” rel=”stylesheet” />    <!– FONTAWESOME ICONS STYLES–>    <link href=”<?php echo $site;?>assets/css/font-awesome.css” rel=”stylesheet” />    <!–CUSTOM STYLES–>    <link href=”<?php echo $site;?>assets/css/style.css” rel=”stylesheet” /> <!– DataTables CSS –> <link rel=”stylesheet” type=”text/css” href=”<?php echo $site;?>assets/plugins/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.css”> <!– DataTables Responsive CSS –> <link href=”<?php echo $site;?>assets/plugins/datatables-responsive/css/dataTables.responsive.css” rel=”stylesheet”>
<!– HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries –>    <!– WARNING: Respond.js doesn’t work if you view the page via file:// –>    <!–[if lt IE 9]>        <script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>        <script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script>    <![endif]–></head><body onload=”window.print()”><center> <table class=”table” style=”width:80%;”> <tr> <td colspan=”3″ align=”center”><h3>KARTU PESERTA</h3></td> </tr> <tr> <td rowspan=”6″> <img src=”<?php echo $site;?>/assets/file/<?php echo $r->foto;?>” height=”190px”width=”170px”> </td> <td>ID Peserta</td> <td><?php echo $r->idKaryawan;?></td> </tr> <tr> <td>Nama</td> <td><?php echo $r->namaKaryawan;?></td> </tr> <tr> <td>Jenis Kelamin</td> <td><?php $jk=array(1=>’Pria’,2=>’Wanita’); echo $jk[$r->jenisKelamin];?></td> </tr> <tr> <td>Telp</td> <td><?php echo $r->telpKaryawan;?></td> </tr> <tr> <td>Alamat</td> <td><?php echo $r->alamatKaryawan;?></td> </tr> <tr> <td>Formasi</td> <td><?php echo $r->formasi;?></td> </tr> </table> </center>     </body></html>

 

Dari kedua script html dan php di atas maka akan menghasilkan sebuah halaman baru yang dengan cara ini user dapat langsung mencetak atau mendownloadnya menjadi php. Simpel kan.

Untuk pertanyaan silahkan berkomentar atau menghubungi kami langsung.

Hubungi Whatsapp