Site icon บริษัท โค๊ดบี จำกัด

แปลง html เป็น pdf รองรับภาษาไทย ด้วย mPdf และ codeigniter

php-export-pdf-ภาษาไทย-3

php-export-pdf-ภาษาไทย-3

<h3>แปลง html เป็น pdf รองรับภาษาไทย ด้วย mPdf และ codeigniter<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<b>แปลง html เป็น pdf รองรับภาษาไทย ด้วย mPdf และ codeigniter<&sol;b><&sol;p>&NewLine;<p>ในการพัฒนา web application อีกหนึ่งโจทย์สำคัญที่เรามักจะได้รับจากลูกค้าคือการทำรายงานข้อมูลในรูปแบบไฟล์ PDF บางเว็บไซต์ อาจจะต้องนำออกข้อมูลทั้งในส่วน Back-End และ Front-End และปัญหาที่เรามักจะพบเจออยู่บ่อย ๆ คือการจัดการกับรูปแบบไฟล์ pdf ที่เป็น Dynamic Content เนื้อหาภายในมีการปรับปรุงเปลี่ยนแปลงอยู่เรื่อย ๆ เช่น การออกใบหักภาษี ณ ที่จ่าย การออกใบเสร็จรับเงิน เป็นต้น<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ปัญหาที่มักจะเจอในการ export pdf คือการจัดการกับภาษาไทย หรือการจัดตำแหน่งฟอนต์ที่มักจะไม่ตรงกับตำแหน่งตามที่ออกแบบไว้ เมื่อ export เป็น pdf ไฟล์ โดยหลัก ๆ ในบทความนี้เราจะใช้ความสามารถของ mPDf ซึ่งเป็น php library ที่ถูกพัฒนาขึ้นมาเพื่อ generate PDF file โดยเฉพาะ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>สิ่งที่ต้องใช้สำหรับบทความนี้<&sol;h4>&NewLine;<ul>&NewLine;<li>mPDF PHP Library <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;mpdf&sol;mpdf" target&equals;"&lowbar;blank">https&colon;&sol;&sol;github&period;com&sol;mpdf&sol;mpdf<&sol;a><&sol;li>&NewLine;<li>PHP Codeigniter Framework <a href&equals;"https&colon;&sol;&sol;codeigniter&period;com" target&equals;"&lowbar;blank">https&colon;&sol;&sol;codeigniter&period;com<&sol;a><&sol;li>&NewLine;<li>html2canvas&period;js <a href&equals;"https&colon;&sol;&sol;html2canvas&period;hertzen&period;com" target&equals;"&lowbar;blank">https&colon;&sol;&sol;html2canvas&period;hertzen&period;com<&sol;a><&sol;li>&NewLine;<li>jQuery Javascript Library <a href&equals;"https&colon;&sol;&sol;jquery&period;com" target&equals;"&lowbar;blank">https&colon;&sol;&sol;jquery&period;com<&sol;a><&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ดาวน์โหลดและติดตั้ง mPDf<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; เริ่มต้นให้ไปดาวน์โหลด mPDF library ที่ github ตามลิงค์นี้ครับ <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;mpdf&sol;mpdf" target&equals;"&lowbar;blank">https&colon;&sol;&sol;github&period;com&sol;mpdf&sol;mpdf<&sol;a><&sol;li>&NewLine;<li>2&period; หลังจากดาวน์โหลดเสร็จแล้วเราจะได้โฟลเด้อชื่อว่า mpdf ให้นำไปวางไว้ใน application&sol;third&lowbar;party จากนั้นให้สร้างโฟลเด้อตั้งชื่อว่า download กำหนด permission เป็น 777 สำหรับบันทึกไฟล์ image และ pdf<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;php-export-pdf-ภาษาไทย-1&period;png" alt&equals;"php-export-pdf-ภาษาไทย" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>3&period; จากนั้นให้สร้าง Controller ขึ้นมา ตั้งชื่อว่า Pdf&period;php ให้ include mPdf เข้ามาใช้งานดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >class Pdf extends CI&lowbar;Controller &lbrace; &NewLine;&Tab; &NewLine;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;parent&colon;&colon;&lowbar;&lowbar;construct&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;helper&lpar;array&lpar;'url'&rpar;&rpar;&semi; &NewLine;&Tab;&Tab;include&lpar;APPPATH&period;"third&lowbar;party&sol;mpdf&sol;mpdf&period;php"&rpar;&semi; &NewLine;&Tab;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>4&period; จากนั้นให้สร้าง view ที่เราต้องการจะแปลงเป็น pdf ขึ้นมา ในที่นี้ผู้เขียนต้องการจะ export ใบเสร็จรับเงิน จึงตั้งชื่อไฟล์ว่า receipt&lowbar;view&period;php และในไฟล์นี้ได้เขียน html สำหรับแสดงรูปแบบใบเสร็จดังนี้&NewLine;<p><b>ให้สังเกตุว่าในส่วนของ element section จะมีการกำหนดไอดีและตั้งชื่อว่า pdf หมายความว่าข้อมูลที่อยู่ใน section นี้ทั้งหมดจะถูกนำออกในรูปแบบ pdf file<&sol;b> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;section class&equals;"sheet padding-20mm" id&equals;"pdf"&gt&semi; &NewLine; &lt&semi;h1&gt&semi;บริษัท โค๊ดบี จำกัด&lt&semi;&sol;h1&gt&semi; &NewLine; &lt&semi;ul&gt&semi; &NewLine; &lt&semi;li&gt&semi;41&sol;94 ถนนแจ้งวัฒนา ปากเกร็ด นนทบุรี 11120&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;โทร&period; &plus;66 085&period;900&period;3405&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;เว็บไซต์ &colon; www&period;codebee&period;co&period;th&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine; &NewLine; &lt&semi;article&gt&semi; &NewLine; &lt&semi;h2&gt&semi;from&colon;&lt&semi;&sol;h2&gt&semi; &NewLine; &lt&semi;p&gt&semi;บริษัท โค๊ดบี จำกัด&lt&semi;&sol;p&gt&semi; &NewLine; &NewLine; &lt&semi;h3&gt&semi;For&colon;&lt&semi;&sol;h3&gt&semi; &NewLine; &lt&semi;p&gt&semi;บริษัท แฮปปี้ แคท เฮ้า จำกัด&lt&semi;&sol;p&gt&semi; &NewLine; &NewLine; &lt&semi;h4&gt&semi;1&comma;000THB&lt&semi;&sol;h4&gt&semi; &NewLine; &lt&semi;ul&gt&semi; &NewLine; &lt&semi;li&gt&semi;Tax&colon; included&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Paid by&colon; cash&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;No&period; 00001&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;Oct 10&comma; 2017&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine; &lt&semi;&sol;article&gt&semi; &NewLine; &NewLine; &lt&semi;&sol;section&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างการแสดงผลเมื่อดูผ่าน browser<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;php-export-pdf-ภาษาไทย-2&period;png" alt&equals;"php-export-pdf-ภาษาไทย" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>5&period; วิธีที่ง่ายที่สุดในการจัดการให้การแสดงผลของ pdf ไม่ผิดเพี้ยนไปจาก html ที่เราออกแบบไว้ คือการแปลง html ให้เป็นรูปภาพก่อน ให้ใช้ความสามารถของ html2canvas&period;js แปลง html ตั้งแต่ไอดี pdf ให้เป็นรูปก่อน สามารถเขียนคำสั่งได้ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var baseURL &equals; "&lt&semi;&quest;php echo base&lowbar;url&lpar;&rpar;&semi; &quest;&gt&semi;"&semi; &NewLine;function downloadPDF&lpar;&dollar;pdf&lowbar;id&rpar;&lbrace; &NewLine;&Tab;&dollar;&lpar;"&num;"&plus;&dollar;pdf&lowbar;id&rpar;&period;css&lpar;&lbrace; opacity&colon; 1 &rcub;&rpar;&semi; &NewLine;&Tab;html2canvas&lpar;&lbrack;document&period;getElementById&lpar;&dollar;pdf&lowbar;id&rpar;&rsqb;&comma; &lbrace; &NewLine;&Tab;&Tab;onrendered&colon; function&lpar;canvas&rpar; &lbrace; &NewLine;&Tab;&Tab; var image &equals; canvas&period;toDataURL&lpar;'image&sol;png'&rpar;&semi; &NewLine;&Tab;&Tab; SaveImage&lpar;image&rpar;&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>6&period; หลังจากได้รูปภาพแบบ base64 แล้วให้เขียนคำสั่งส่งข้อมูลไปที่ Pdf Controller เพื่อบันทึกรูปและแปลงเป็น PDf ตามลำดัง&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >function SaveImage&lpar;image&rpar;&lbrace; &NewLine;&Tab;&dollar;&period;ajax&lpar;&lbrace; &NewLine;&Tab;&Tab;type&colon; 'POST'&comma; &NewLine;&Tab;&Tab;url&colon; baseURL&plus;'pdf&sol;save'&comma; &NewLine;&Tab;&Tab;data&colon; &lbrace;base64Image&colon;image&comma;image&lowbar;name&colon;"pdf"&rcub;&comma; &NewLine;&Tab;&Tab;success&colon; function&lpar;image&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;var d &equals; new Date&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;var n &equals; d&period;getTime&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;window&period;location &equals; image&plus;"&quest;t&equals;"&plus;n&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>7&period; ใน Pdf Controller ให้เขียนคำสั่งเพื่อบันทึกรูปและแปลงเป็น pdf ด้วย mPdf ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >public function save&lpar;&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;&sol;&sol; แปลง html view ให้เป็นรูปก่อน &NewLine;&Tab;&Tab;&dollar;base64Image &equals; &dollar;&lowbar;REQUEST&lbrack;'base64Image'&rsqb;&semi; &NewLine;&Tab;&Tab;&dollar;image&lowbar;name &equals; &dollar;this-&gt&semi;input-&gt&semi;post&lpar;'image&lowbar;name'&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;image&lowbar;name&lowbar;save &equals; &dollar;image&lowbar;name&period;"&period;png"&semi; &NewLine;&Tab;&Tab;file&lowbar;put&lowbar;contents&lpar;FCPATH&period;"download&sol;"&period;&dollar;image&lowbar;name&lowbar;save&comma; base64&lowbar;decode&lpar;str&lowbar;replace&lpar;'data&colon;image&sol;png&semi;base64&comma;'&comma;''&comma;&dollar;base64Image&rpar;&rpar;&rpar;&semi; &NewLine;&Tab;&Tab; &NewLine;&Tab;&Tab;&sol;&sol; นำรูปมา save เป็น pdf ด้วย mPDf &NewLine;&Tab;&Tab;&dollar;image &equals; base&lowbar;url&lpar;"download&sol;"&period;&dollar;image&lowbar;name&lowbar;save&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;html &equals; '&lt&semi;img src&equals;"'&period;&dollar;image&period;'"&sol;&gt&semi;'&semi; &NewLine;&Tab;&Tab;&dollar;mpdf&equals;new mPDF&lpar;'c'&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;mpdf-&gt&semi;WriteHTML&lpar;&dollar;html&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;pdf&lowbar;name &equals; &dollar;image&lowbar;name&period;"&period;pdf"&semi; &NewLine;&Tab;&Tab;&dollar;mpdf-&gt&semi;Output&lpar;FCPATH&period;"download&sol;"&period;&dollar;pdf&lowbar;name&comma;"F"&rpar;&semi; &sol;&sol;F &NewLine;&Tab;&Tab;echo base&lowbar;url&lpar;"download&sol;"&period;&dollar;pdf&lowbar;name&rpar;&semi; &NewLine;&Tab;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>8&period; ที่ไฟล์ receipt&lowbar;view ให้เรียกใช้งานฟังก์ชั่นสำหรับดาวน์โหลดด pdf ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;document&rpar;&period;ready&lpar;function&lpar;&rpar;&lbrace; &NewLine;&Tab;setTimeout&lpar;init&comma; 1000&rpar;&semi; &NewLine;&rcub;&rpar;&semi; &NewLine;function init&lpar;&rpar;&lbrace; &NewLine;&Tab;downloadPDF&lpar;"pdf"&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<li>9&period; ทดสอบการทำงาน โดยการ load receipt&lowbar;view ที่ index ของ pdf controller ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >public function index&lpar;&rpar;&lbrace; &NewLine;&Tab;&dollar;this-&gt&semi;load-&gt&semi;view&lpar;"receipt&lowbar;view"&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;downloadlist&sol;" target&equals;"&lowbar;blank">ดาวน์โหลด Examples Source Code<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;

Exit mobile version