Konversi HTML TABLE ke PDF dengan FPDF

Ini dia yang masih fresh di otak, tapi sulitnya minta ampun karena FPDF menggunakan koordinat untuk membuat layoutnya.. hasil googling beberapa jam stuck gak menemukan pencerahan sama sekali untuk membuat html dapat di attach melaui email sebagai file pdf.

FPDF terkenal dengan stabilitas dan kecepatan dalam mengkonversi data yang mungkin mencapai ratusan row, engine ini mumpuni untuk melakukan konversi ke format PDF tapi hampir rata-rata kesulitannya adalah melakukan perubahan disisi layout. Untuk membuat file pdf yang mampu menampung html table syntac dengan berbagai aksesorisnya seperti width, border, bgcolor, colspan, rowspan itu sangat menyulitkan.

Beruntung lah ditengah-tengah perjalanan saya menemukan tools fpdf dari sini. Beberapa hal yang perlu di persiapkan adalah sebagai berikut :

tools tersebut dapat mensupport syntac html table seperti berikut :

  • <table border align
    width height bgcolor
    ></table>

    Attribute Value Description
    border x the thick of border table
    align left,center,right Table will be aligned with the current page
    width, height integer the width or the height of this table (in milimet by default)
    bgcolor #xxxxxx Background color of this table in hexadecimal
  • <tr bgcolor repeat></tr>
    Attribute Value Description
    bgcolor #xxxxxx Background color of this row in hexadecimal
    repeat If a row has this property, it will be rewrite on each page if the table is broken on many page. A table can have many row repeatly. It’s useful for a long table with title and the title will be rewrite on each page.
  • <td border align valign width height bgcolor colspan
    rowspan nowrap family size color></td>

    Attribute Value Description
    border 0,trbl,x Border can be 0 for a cell with no border. If you want to customise
    your cell, use trbl to define: t=0|1=top, r=0|1=right, b=0|1=bottom
    and l=0|1=left.Example:- border=‘1010’: Draw only border top and bottom- border=‘0101’: Draw only border left and right- border=‘1001’: Draw only border top and left

    - border=‘1’: Draw all border 0.1mm

    - border=‘2.5’: Draw all border 2.5mm

    align left,center,right Text will be align inside the cell in horizontal, defaut is left
    valign top,middle,bottom Text will be align inside the cell in vertical, defaut is middle
    width, height integer the width or the height of this table (in milimet by default)
    bgcolor #xxxxxx Background color of this table in hexadecimal
    colspan integer Table cells can span across more than one column or row.
    The attributes COLSPAN (“how many across”) and ROWSPAN (“how
    many down”) indicate how many columns or rows a cell should take
    up.
    rowspan integer
    nowrap Indicates that text should not wrap in the cell
    family Verdana,Times,….. Family font
    style bold,italic,underline Style of the font, delimiter=”,”, without space, case sensitive
    size 12,14… Size of font
  • <img src=’/var/example.jpg‘ width=’100‘ height=’100‘> Support draw only an image in a cell
  • <br> forced line break
  • &nbsp; space character
  • &lt; less than character
  • Any other tag which isn’t supported will be understood as tag <br>.

Kalau sudah didownload hasil ekstrak file tersebut terdapat dua folder penting yaitu,

    1. font

Folder ini berisi semua komponen font yang di support oleh FPDF, diantaranya Times, Courier, Helvetica, dll.

    1. lib

Folder ini berisi keseluruhan library pendukung tools, mulai dari fpdf engine dan beberapa class pendukung lain.

Oke, tahap selanjutnya kita Coding!

<?php

$htmlsourcemail = ‘

<table border=“1” align=“center”>

<tr>

<td rowspan=“2” valign=“middle” border=“0”>rowspan=2, valign=middle</td>

<td>Normal</td>

<td>Normal</td>

<td>Normal</td>

<td colspan=“2” rowspan=“2” valign=“bottom” bgcolor=“#FF00FF”>colspan=2<br>rowspan=2<br>valign=bottom</td>

</tr>

<tr>

<td height=“15”>Normal</td>

<td rowspan=“2” align=“right” bgcolor=“#aaaaaa” border=“0”>rowspan=2</td>

<td border=“0”>border=0</td>

</tr>

<tr>

<td>Normal</td>

<td>Normal</td>

<td>Normal</td>

<td rowspan=“3” valign=“top” bgcolor=“#CC3366″>rowspan=3</td>

<td>Normal</td>

</tr>

<tr bgcolor=“#cccccc”>

<td>Normal</td>

<td colspan=“3” align=“center”>align center, colspan=3</td>

<td>Normal</td>

</tr>

<tr>

<td align=“right” valign=“bottom”>align=right<br>valign=bottom</td>

<td>Normal</td>

<td>&nbsp;</td>

<td>Normal</td>

<td height=“20”>height=20</td>

</tr>

</table>‘;

?>

Layoutnya akan seperti ini :

rowspan=2, valign=middle Normal Normal Normal colspan=2
rowspan=2
valign=bottom
Normal rowspan=2 border=0
Normal Normal Normal rowspan=3 Normal
Normal align center, colspan=3 Normal
align=right
valign=bottom
Normal Normal height=20

Hal yang akan sangat sulit apabila dilakukan manual dengan fpdf.

UPDATE

Karena link source diatas sepertinya sudah tidak dapat diakses lagi, saya coba bikin sample scriptnya lengkap download disini tinggal anda kembangkan sesuai dengan kebutuhan.

About these ads

35 thoughts on “Konversi HTML TABLE ke PDF dengan FPDF

  1. Mas ChandraWira, gimana kalo data yang mau saya tampilkan dalam format pdf itu adalah data dari tabel yang sudah ditampilkan di halaman website? sebagai contoh tabel dan script saya bisa di download di link ini.
    http://www.ziddu.com/download/13633159/tableBilling.doc.html
    Tabel total dan Total amount itu didapatkan dari hasil perhitungan aja dan tidak ada di database, dan data-data yang ada ditabel itu dihasilkan dari beberapa tabel.
    Bagaimana caranya ketika datanya sudah ditampilkan di table tersebut dan pada saat klik button Convert to PDF data yang muncul adalah data yang sama pada tabel?
    Mohon bantuannya.. Terimakasih

    • Bisa pelajari metode curl pada PHP, tekniknya mengambil keseluruhan data pada tampilan web. Kemudian baru di pilaah-pilih mana data yg dibutuhkan dan yang tidak.. baru kemudian diolah lagi untuk menjadi file PDF. (Kasus membaca data dr web lain)

      Kalau membaca data yang sudah ditampilkan, ccukup sedikit trik saja, yaitu membuat 2 dokumen yang sama. Satu untuk view satu lagi untuk download. Ketika action convert to PDF panggil saja file kedua dengan format yang sama tetapi sudah disiapkan untuk download sebagai PDF.
      Semoga membantu.

  2. hohoh ini dia yg ane cari :) . hmm mo tanya . itu kan metodenya file php nya di save di server yak. kalo misal gak usah di save gimana yak, jadi langsung muncul opsi download file pdf nya :)

  3. hasil yang dapat akan membentuk file baru di server berupa file PDF dan kemudian akan di load.
    bagaimana nih caranya supaya langsung di tampilkan saja tanpa harus menyimpan terlebih dahulu?

  4. keren juga ni mas, tp kok setelah saya coba malah muncul ini :
    Notice: Undefined property: PDF::$rifht in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 846

    Strict Standards: Non-static method Color::HEX2RGB() should not be called statically, assuming $this from incompatible context in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 712

    Notice: Undefined property: PDF::$rifht in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 846

    Notice: Undefined property: PDF::$rifht in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 846

    Notice: Undefined property: PDF::$rifht in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 846

    Strict Standards: Non-static method Color::HEX2RGB() should not be called statically, assuming $this from incompatible context in C:\xampp\htdocs\blu\object\pdfontheair\pdf\lib\pdftable.inc.php on line 712.

    mohon bantuannya mas

  5. coba lihat settingan php nya… :D update ke php terbaru, trus jangan lupa pathnya di setting ulang (line 3) pdf.php

    $rootpath = $_SERVER['DOCUMENT_ROOT'].”/chandra/testing/pdfontheair/”; // rubah, disesuaikan dengan path document berada

      • $p->output($rootpath.$filename,’F’); // tempat file pdf yg akan disimpan di server.
        mas, kalau F nya saya ganti dengan D (untuk download kan..?) kok malah enggak bisa. ini pesannya “FPDF error: Some data has already been output, can’t send PDF file”. pake F bisa mas cuma pake D yang engga bisa. tolong dibantu yak… :)

  6. Hai,
    Saya berada di Vietcom vanxuan.net dan penulis PDFTable. Terima kasih untuk memperkenalkan produk saya di sini. Anda dapat mempelajari dan menggunakan versi terbaru di PDFTable http://vanxuan.net/tool/pdftable/. Semua masalah dapat dikirim ke saya via email.

    Vietcom
    (Saya menulis paragraf di atas dengan google translate)

  7. Hiya! I know this is kinda off topic nevertheless I’d figured I’d
    ask. Would you be interested in trading links or maybe guest writing a blog article or vice-versa?
    My website discusses a lot of the same topics
    as yours and I believe we could greatly benefit from each other.
    If you’re interested feel free to send me an email. I look forward to hearing from you! Fantastic blog by the way!

  8. mas, saya keluar pesan error “Strict Standards: Non-static method Color::HEX2RGB() should not be called statically”. saya pake appserver 2.6. mohon bantuannya

  9. “Konversi HTML TABLE ke PDF dengan FPDF | Just Another Notes” Roman Blinds ended up being a extremely nice posting, .
    Keep publishing and I’ll keep on viewing! Many thanks -Jens

  10. klu errornya gini … kenapa ya ..

    Warning: getimagesize(/images/logo.jpg) [function.getimagesize]: failed to open stream: No such file or directory in D:xampphtdocsppgpapuaadminppgonlinepdflibfpdf.inc.php on line 1202
    FPDF error: Missing or incorrect image file: /images/logo.jpg

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s