วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
eange08
PHP Super Hero Member
PHP Super Hero Member
Posts: 652
Joined: 22/12/2020 10:09 am

วิธีใช้ Google Charts ให้แสดงบน PDF โดยใช้ MPDF

Post by eange08 »

เมื่อเราทำกราฟด้วย Google Chart ให้แสดงบนหน้าจอได้แล้ว ก็อยากจะออกรายงานเป็น PDF แต่ยังสงสัยว่า Google Chart นั้นจะทำได้ไหม จะต้องเรียก API บน PDF อีกทีหรือเปล่า ซึ่งในบทความนี้เรามีคำตอบมาให้ว่า....ทำได้!!
มาดูขั้นตอนการทำกันนะคะ

1. ในหน้า View ให้สร้างกราฟด้วย API ของ Google Chart เราจะเพิ่ม code ส่วนสร้างรูปภาพเอาไว้
โดยรูปจะอยู่ในรูปแบบของ binary code หรือการเข้ารหัสรูปภาพเอาไว้ เช่น

Code: Select all

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
CODE ในส่วนของกราฟ

Code: Select all

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

	// Create the data table.
	var data2 = new google.visualization.DataTable();
	data2.addColumn('string', 'Topping');
	data2.addColumn('number', 'Slices');
	data2.addRows([
	['Mushrooms',6],
	['Onions', 1],
	['Olives', 1],
	['Zucchini', 1],
	['Pepperoni', 2]
	]);
	// Set chart options
	var options = {title:null,
	width:'auto',
	 chartArea:{
	   width:600,
	 },								
	};

	var chart = new google.visualization.PieChart(document.getElementById('chart_div')); //----ส่วนการสร้างกราฟในหน้า View ของเราปกติ
	//----ส่วนของการสร้างรูปภาพแปลงเป็น Binary Code
	google.visualization.events.addListener(chart, 'ready', function () {  //----เป็นคำสั่งทำเมื่อมีการสร้างกราฟเสร็จแล้วให้กระทำ action ภายใต้คำสั่งนี้ทันที
	document.getElementById('hdd_chart_pic').value = chart.getImageURI(); //------เก็บรูปใส่ใน input ที่ type="hidden" ที่ id="hdd_chart_pic"
	});
	//------------------------------------
	chart.draw(data2, options);
}
</script>
2. ให้มี input ที่เป็น Hidden เก็บค่าของรูปภาพเอาไว้ โดยใช้ id="hdd_chart_pic"

Code: Select all

<?php echo Html::hiddenInput('hdd_chart_pic','',array('id'=>'hdd_chart_pic')); ?>
3. เมื่อเรากดออกรายงานให้เราเรียกค่าจาก input Hidden นั้นลงใน session

Code: Select all

$_SESSION['img']=$_POST['hdd_chart_pic'];

4. ไปที่หน้าโค้ดสร้าง PDF ด้วย MPDF
ให้เรียก session ที่เก็บข้อมูลรูปเอาไว้ด้วยคำสั่ง img ของ HTML
(MPDF เป็น library ช่วยทำ PDF ของ PHP ซึ่งจะใช้ HTML ในการทำแบบฟอร์มของ PDF)

Code: Select all

<img src="<?php echo $_SESSION['img']; ?>" width="90%"  />

ผลลัพท์ที่ได้ :
screenshot-www.webslesson.info-2020.12.23-15_37_48.png
screenshot-www.webslesson.info-2020.12.23-15_37_48.png (61.57 KiB) Viewed 204 times
อ้างอิงจาก :
- https://www.webslesson.info/2018/07/how ... p.html?m=1
- ทำกราฟด้วย Google charts : viewtopic.php?f=72&t=71753
- สามารถอ่านข้อมูลเพิ่มของ MPDF ได้ที่ https://mpdf.github.io/
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests