Tag Archives: PDF

HTML to PDF ตัวไหนดี

Posted on by

Source : http://www.jquerytips.com/

สวัสดีครับ หายหน้ากันอีกไปพักใหญ่ๆ แต่ว่าก็ยัง อัพเดทอยู่ใน Fan Page อยู่เรื่อยๆ นะ แต่ว่าถ้าเป็น บทความยาวๆ นี่มันท้อ แฮะ 555

แต่วันนี้ ยังไงก็มาแล้ว ก็จับประเด็น บางเรื่องมาเล่าสู่กันฟัง…

พอดีช่วงนี้ผมกำลัง ทำงานในส่วนออก Report พอดี ซึ่งที่ต้องการก็คือ ออก Report เป็น PDF อันที่จริงมันก็ไม่มีปัญหาอะไรหรอก Lib PDF มีอยู่ถมไป Zend_Pdf ซึ่งทำงานได้ละเอียดมากๆ ก็มีอยู่ แต่ด้วยความขี้เกียจ เลยไม่อยากไป Add Columns ไปสร้างสี แบ่งล๊อกอะไรให้มันวุ่นวาย

แล้วก็จำได้ด้วยว่าเคยเห็น Web ตั้งเยอะที่มัน Convert HTML เป็น PDF มันน่าจะมีใครทำ Lib อะไรมาให้ใช้บ้างน่า สรุปได้ แคนดิเดท มา 3 ตัว ประกอบไปด้วย

1. TCPDF

2. Dompdf

3. mPDF

ก็เลยค่อยๆลอง ไปทีละตัว โดยที่แต่ละตัว ก็มีข้อเด่น ข้อด้อยต่างกันไป ซึ่งแรกเริ่ม ผมก็ไล่มาเลย ตั้งแต่

TCPDF

ตัวนี้ค่อนข้างจะใช้ง่ายมาก ไม่ต้อง Config อะไรวุ่นวาย Font ก็มี ที่ Support ภาษาไทยมาให้ในตัว คือ “Freeserif” ไม่ต้องทำอะไรเท่าไหร่ ตอนแรกก็คิดว่าจะหยุดที่ตัวนี้แหละ แต่พอทำไปทำมาเกิดปัญหา คือมันสามารถอ่าน Stylesheet ได้แค่เล็กน้อยเท่านั้น พวก attrs ง่ายๆ อย่าง  color อะไรแบบนี้

แต่ว่ามันดันอ่านพวก float, padding, margin เพี้ยนๆ ไม่เหมือน HTML ที่ทำมาเท่าไหร่ ซึ่งมันยากมาก เพราะผมต้องทำ HTML เป็น table เกือบทั้งหมด เลยเปลี่ยนๆ ลองตัวใหม่

Dompdf

ตัวนี้ลองอ่าน Document แล้ว ก็ลองใช้งาน ถูกใจมากเลย ถึงจะ config ลำบากไปนิด แต่ว่าใช้งานง่าย โคดเขียนสวย Doc มีตัวอย่างเยอะ แล้วก็ดู ค่อนข้างโปรที่สุด แต่….

พอถึงเรื่องภาษาไทย ผมพยายาม Add Font ไทยเข้าไป มันก็ได้อยู่ ถึงจะลง Font ค่อนข้างลำบากหน่อย แต่พอเอามา Render จริงๆ font ไทย เนียนนะครับ ใช้ได้หมด แต่สระ เสือกกลายเป็น สี่เหลี่ยมหมด (คิดว่าคงมีวิธีแก้ แต่ตอนนี้ไม่ได้หาต่อแล้ว) ก็เลยข้ามไปก่อน กะว่าจะมาหาวิธีแก้ ที่ตัวนี้แหละ แต่ยังไงขอลอง ตัวถัดไปก่อน

mPDF

ตัวนี้บอกตามตรง ตอนแรกผมค่อนข้างจะไม่สนใจ ด้วยความที่หน้าเว็บ ดูไม่โปร (ใช้ WordPress ไม่เปลี่ยน Theme) PageRank ไม่ขึ้นเลย Search หาก็ไม่ค่อยมีข้อมูล

แต่ก็ลองดู เพราะว่า คงใช้เวลาไม่นาน ดูตามตัวอย่างแล้ว เขียนตามนิดเดียวก็คงรู้ผล

แต่เรื่องไม่น่าเชื่อก็เกิดขึ้น คือ Lib ตัวนี้กับทำตามที่ผมต้องการได้ทุกอย่าง คือโจทย์ของผมมีว่า

– ต้องสามารถอ่าน CSS ได้

– ต้องสามารถแสดงผล ได้เหมือน HTML เพี้ยนได้ไม่เกิน 2%

– ต้องสามารถใช้งานกับภาษาไทยได้ 100%

– ใช้ง่ายไม่ต้องต่อ online กับ Service ภายนอกตัวอื่นๆ

– ต้องสามารถ ทำ Paging ในตัว PDF ได้

– ต้อง Config header + footer ได้

– ต้องอ่าน img แล้วนำเข้าไปได้

ไม่น่าเชื่อก็ต้องเชื่อแหละครับ Lib ตัวนี้ทำได้หมดเลย ได้มากกว่าที่ผมต้องการเสียอีก แถมระบบการ Config ก็เอื้อ แก้การประยุกต์ใช้งานมากๆ

มาลองดูตัวอย่างที่ผมทำการ Lab ไปนะครับ

สมมุติว่า ผมมี HTML ตามนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php

$html = <<<EOF
<div id=”wrapper”>
<div>
<div><img src=”/wp-content/uploads/archive/iannnnnAVATAR_normal.png” /></div>
<div>
<div>
<a href=”#”>Name<span>@username</span></a>
<small>4m</span>
</div>
<p lang=”th”>[THAI TEXT TO SHOW]</p>
<div>Footer text</div>
</div>
</div>
<div></div>
</div>
EOF;

?>

 

แล้วผมมี stylesheet ประมาณนี้

1
2
3
4
5
6
7
8
9
10
11
.row { background:url(/wp-content/uploads/archive/bg.jpg); }
.row { clear:both; width:500px; padding:10px; border-radius:5px; font-family:naipol; font-size:11px; background-color:#EEE; }
.picture { float:left; display:block; width:48px; height:48px; }
.picture img { width:48px; height:48px; border-radius:5px; }

.content { margin-left:60px; }
.content .header small { float:right; text-align:right; }
.content p { margin:0; padding: 5px 0; }
.content .footer { color:orange; }

.clear { clear:both; }

 

ผมลองเขียนโคดขึ้นมาเพื่อ Gen ออกมาดู

1
2
3
4
5
6
7
8
9
10
<?php
$mpdf = new mPDF();
//$mpdf->setDisplayMode(‘fullpage’);
//$mpdf->setAutoFont();

$mpdf->writeHTML($style, 1);
$mpdf->writeHTML($html);
$mpdf->Output();

?>

โดยที่ Stylesheet ผมใส่ไว้ในตัวแปล $style นะครับ

 

ผลลัพธ์ที่ออกมาของผม มาตามรูปข้างล่างนี้ครับ

ซึ่งเหมือนกับ HTML เป๊ะเลย เรื่องของ Font Thai ผมใช้ “Thonburi” เป็นตัว font ครับ

ที่สำคัญ Lib ตัวนี้ยังมีการ config font ที่ฉลาดมา และยังสามารถ Detect ภาษาให้เองได้ด้วยอีก

http://mpdf1.com/manual/index.php?tid=453

 

ลองไปเล่นดูนะครับ มันเหมาะกับการ Generate Reports, Coupons หรือ หน้าเว็บ มาก