PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


รบกวนสอบถามด้วยค่ะ คือdata table export excel print pdf ไม่ขึ้นรูปภาพค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนสอบถามด้วยค่ะ คือdata table export excel print pdf ไม่ขึ้นรูปภาพค่ะ

รบกวนสอบถามด้วยค่ะ คือdata table export excel print pdf ไม่ขึ้นรูปภาพค่ะ
Narita Nan Kaewprasert 223.204.235.xxx 05-05-2019 20:16:53

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
น่าจะต้องแปลงรูปที่อยู่ในรูปแบบ url หรือไฟล์เป็น DataURI และก็ตอน export เพิ่ม option  ให้รองรับ HTML แนวทางประมาณนั้น

exportOptions:{
	columns:[0,1,2,3,4,5],
	stripHtml: false
},


Ninenik 14.207.46.xxx 06-05-2019
 ความคิดเห็นที่ 2
ดูโค้ดน้เป็นแนวทาง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" >
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" >
</head>

<body>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th width="200">Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
<?php for($i=1;$i<=20;$i++){?>        
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><img id="img_<?=$i?>" src="ninenik_page_logo.png" style="width:60px;height:auto;"/>
                </td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
  <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript">
$(function(){

    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',
				pageSize:'A4',
				orientation:'landscape',
				action: function ( e, dt, node, config ) {
					dt.page.len(-1).draw(); // เมื่อกดปุ่มส่งออก pdf ให้สลับไปแสดงข้อมูลทั้งหมด
					$.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, node, config);			
					dt.on( 'draw.dt', function () {	
						console.log('drwa complate');
					});
				},				
				exportOptions:{
					columns:[0,1,2,3], // คอลัมส์ที่จะส่งออก
					modifier : {
						page:'all' // หน้าที่จะส่งออก all / current
					},
					stripHtml: false
				},
                customize: function ( doc ) {	
					doc.content[1].table.widths = ['25%','25%','25%','auto'];	
					doc.content[1].table.headerRows = 1;
					doc.content[1].table.dontBreakRows = true;
					doc.content[1].table.keepWithHeaderRows = 1;

					var rowCount = doc.content[1].table.body.length;
					for(i = 1; i < rowCount; i++){
						doc.content[1].table.body[i][0] = {
							alignment:'center',
							text:'test'	
						};
						doc.content[1].table.body[i][1] = {
							alignment:'center',
							text:'test'	
						};
						doc.content[1].table.body[i][2] = {
							alignment:'center',
							text:'test'	
						};
						doc.content[1].table.body[i][3] = {
							alignment:'center',
							text:''	
						};						
						var imgData = "";
						if($("#img_"+i)[0]!=undefined){
							imgData = getDataURL($("#img_"+i)[0]);			
							if(imgData!=""){
								doc.content[1].table.body[i][3] = {
									alignment: 'center',
									image: imgData,
									width: 60,
									height: 58							
								}						
							}
						}
					}
					
                }
            }
        ],
		"drawCallback": function( settings ) {
			var api = new $.fn.dataTable.Api( settings );
			 // ถ้าแสดงแบบทั้งหมดแล้ว ให้เปลี่ยนกลับมาแสดงแบบปกติ หน้าละ 10 รายการ หลังจากส่งออกแล้ว
			if(api.page.len()==-1){
				setTimeout(function(){
					api.page.len(10).draw();
				},1000);
			}
		}
    } );

});
// ฟังก์ชั่นสำหรับสร้าง DataURL จากรูปภาพ
function getDataURL(img) {
	var canvas = document.createElement("canvas");
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0);
	var dataURL = canvas.toDataURL("image/png");
	return dataURL;
 // return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
}
</script>
</body>
</html>


ตัวอย่าง DEMO

Ninenik 14.207.46.xxx 06-05-2019