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

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

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

ข้อมูล

ส่วน html ดังข้อมูลมาจาก databaseค่ะ

ส่วนของสคิป

Narita Nan Kaewprasert 05-05-2019 20:16:53

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

น่าจะต้องแปลงรูปที่อยู่ในรูปแบบ url หรือไฟล์เป็น DataURI และก็ตอน export เพิ่ม option ให้รองรับ HTML แนวทางประมาณนั้น

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

ninenik 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 06-05-2019

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน