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

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



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

ในการพัฒนา web application อีกหนึ่งโจทย์สำคัญที่เรามักจะได้รับจากลูกค้าคือการทำรายงานข้อมูลในรูปแบบไฟล์ PDF บางเว็บไซต์ อาจจะต้องนำออกข้อมูลทั้งในส่วน Back-End และ Front-End และปัญหาที่เรามักจะพบเจออยู่บ่อย ๆ คือการจัดการกับรูปแบบไฟล์ pdf ที่เป็น Dynamic Content เนื้อหาภายในมีการปรับปรุงเปลี่ยนแปลงอยู่เรื่อย ๆ เช่น การออกใบหักภาษี ณ ที่จ่าย การออกใบเสร็จรับเงิน เป็นต้น



ปัญหาที่มักจะเจอในการ export pdf คือการจัดการกับภาษาไทย หรือการจัดตำแหน่งฟอนต์ที่มักจะไม่ตรงกับตำแหน่งตามที่ออกแบบไว้ เมื่อ export เป็น pdf ไฟล์ โดยหลัก ๆ ในบทความนี้เราจะใช้ความสามารถของ mPDf ซึ่งเป็น php library ที่ถูกพัฒนาขึ้นมาเพื่อ generate PDF file โดยเฉพาะ

สิ่งที่ต้องใช้สำหรับบทความนี้


ดาวน์โหลดและติดตั้ง mPDf

  • 1. เริ่มต้นให้ไปดาวน์โหลด mPDF library ที่ github ตามลิงค์นี้ครับ https://github.com/mpdf/mpdf
  • 2. หลังจากดาวน์โหลดเสร็จแล้วเราจะได้โฟลเด้อชื่อว่า mpdf ให้นำไปวางไว้ใน application/third_party จากนั้นให้สร้างโฟลเด้อตั้งชื่อว่า download กำหนด permission เป็น 777 สำหรับบันทึกไฟล์ image และ pdf


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

  • 3. จากนั้นให้สร้าง Controller ขึ้นมา ตั้งชื่อว่า Pdf.php ให้ include mPdf เข้ามาใช้งานดังนี้
    class Pdf extends CI_Controller {
    	
    	public function __construct()
    	{
    		parent::__construct();
    		$this->load->helper(array('url'));
    		include(APPPATH."third_party/mpdf/mpdf.php");
    	}
  • 4. จากนั้นให้สร้าง view ที่เราต้องการจะแปลงเป็น pdf ขึ้นมา ในที่นี้ผู้เขียนต้องการจะ export ใบเสร็จรับเงิน จึงตั้งชื่อไฟล์ว่า receipt_view.php และในไฟล์นี้ได้เขียน html สำหรับแสดงรูปแบบใบเสร็จดังนี้

    ให้สังเกตุว่าในส่วนของ element section จะมีการกำหนดไอดีและตั้งชื่อว่า pdf หมายความว่าข้อมูลที่อยู่ใน section นี้ทั้งหมดจะถูกนำออกในรูปแบบ pdf file

    <section class="sheet padding-20mm" id="pdf">
        <h1>บริษัท โค๊ดบี จำกัด</h1>
        <ul>
          <li>41/94 ถนนแจ้งวัฒนา ปากเกร็ด นนทบุรี 11120</li>
          <li>โทร. +66 085.900.3405</li>
          <li>เว็บไซต์ : www.codebee.co.th</li>
        </ul>
    
        <article>
          <h2>from:</h2>
          <p>บริษัท โค๊ดบี จำกัด</p>
    
          <h3>For:</h3>
          <p>บริษัท แฮปปี้ แคท เฮ้า จำกัด</p>
    
          <h4>1,000THB</h4>
          <ul>
            <li>Tax: included</li>
            <li>Paid by: cash</li>
            <li>No. 00001</li>
            <li>Oct 10, 2017</li>
          </ul>
        </article>
    
      </section>



    ตัวอย่างการแสดงผลเมื่อดูผ่าน browser
    php-export-pdf-ภาษาไทย

  • 5. วิธีที่ง่ายที่สุดในการจัดการให้การแสดงผลของ pdf ไม่ผิดเพี้ยนไปจาก html ที่เราออกแบบไว้ คือการแปลง html ให้เป็นรูปภาพก่อน ให้ใช้ความสามารถของ html2canvas.js แปลง html ตั้งแต่ไอดี pdf ให้เป็นรูปก่อน สามารถเขียนคำสั่งได้ดังนี้
    var baseURL = "<?php echo base_url(); ?>";
    function downloadPDF($pdf_id){
    	$("#"+$pdf_id).css({ opacity: 1 });
    	html2canvas([document.getElementById($pdf_id)], {
    		onrendered: function(canvas) {
    		   var image = canvas.toDataURL('image/png');
    		   SaveImage(image);
    		}
    	});
    }
  • 6. หลังจากได้รูปภาพแบบ base64 แล้วให้เขียนคำสั่งส่งข้อมูลไปที่ Pdf Controller เพื่อบันทึกรูปและแปลงเป็น PDf ตามลำดัง
    function SaveImage(image){
    	$.ajax({
    		type: 'POST',
    		url: baseURL+'pdf/save',
    		data: {base64Image:image,image_name:"pdf"},
    		success: function(image) {
    			var d = new Date();
    			var n = d.getTime();
    			window.location = image+"?t="+n;
    		}
    	});
    }
  • 7. ใน Pdf Controller ให้เขียนคำสั่งเพื่อบันทึกรูปและแปลงเป็น pdf ด้วย mPdf ดังนี้
    public function save()
    	{
    		// แปลง html view ให้เป็นรูปก่อน 
    		$base64Image = $_REQUEST['base64Image'];
    		$image_name = $this->input->post('image_name');
    		$image_name_save = $image_name.".png";
    		file_put_contents(FCPATH."download/".$image_name_save, base64_decode(str_replace('data:image/png;base64,','',$base64Image)));
    		
    		// นำรูปมา save เป็น pdf ด้วย mPDf
    		$image = base_url("download/".$image_name_save);
    		$html = '<img src="'.$image.'"/>';
    		$mpdf=new mPDF('c'); 
    		$mpdf->WriteHTML($html);
    		$pdf_name = $image_name.".pdf";
    		$mpdf->Output(FCPATH."download/".$pdf_name,"F"); //F
    		echo base_url("download/".$pdf_name);
    	}
  • 8. ที่ไฟล์ receipt_view ให้เรียกใช้งานฟังก์ชั่นสำหรับดาวน์โหลดด pdf ดังนี้
    $(document).ready(function(){
    	setTimeout(init, 1000); 
    });
    function init(){
    	downloadPDF("pdf");
    }
  • 9. ทดสอบการทำงาน โดยการ load receipt_view ที่ index ของ pdf controller ดังนี้
    public function index(){
    	$this->load->view("receipt_view"); 
    }


ดาวน์โหลด Examples Source Code



By codebee

- Programmer & Writer