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

แปลง 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 PHP Library https://github.com/mpdf/mpdf
• PHP Codeigniter Framework https://codeigniter.com
• html2canvas.js https://html2canvas.hertzen.com
• jQuery Javascript Library https://jquery.com

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

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

• 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