Skip to main content

Export ข้อมูลอย่างง่ายด้วย TableExport.js Javascript Library

monkeywebstudio Javascript, JQUERY

สวัสดีครับ ในบทความนี้เราจะมาแนะนำการใช้งาน TableExport.js ซึ่งเป็น Javascript Library สำหรับ Export ข้อมูลรองรับการ Export ข้อมูลจาก Html Table ไปเป็นไฟล์ Excel , Csv หรือ ไฟล์ text
การใช้งานสามารถดูตัวอย่างเพิ่มเติมจากเว็บไซต์ผู้พัฒนาได้ที่
https://tableexport.v4.travismclarke.com/#tableexport

การติดตั้ง TableExport.js

การติดตั้ง สามารถทำได้หลายวิธีเช่น ติดตั้ง ผ่านตัวจัดการแพ็คเกจ อย่าง Bower หรือ npm หรือจะใช้บริการ Script Online จาก CDN ก็ได้ ในตัวอย่างต่อไปนี้จะใช้วิธีติดตั้งจาก CDN

นำเข้าไฟล์ Css 

<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/css/tableexport.css" rel="stylesheet">

นำเข้าไฟล์ Js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.10/xlsx.core.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blob-polyfill/1.0.20150320/Blob.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/js/tableexport.min.js"></script>

เรียกใช้งาน ฟังชั่น  TableExport 

	<script>
                //เรียกใช้งานฟังชั่น TableExport ให้ทำงานกับ Tag Table
		TableExport(document.getElementsByTagName("table"), {
			headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
			footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
			formats: ['xlsx', 'csv', 'txt'],             // (String[]), filetype(s) for the export, (default: ['xls', 'csv', 'txt'])
			filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')
			bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: true)
			exportButtons: true,                        // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
			position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
			ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
			ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
			trimWhitespace: true                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
		});

	</script>

ตัวอย่างการเรียกใช้งาน

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TableExport</title>
	
    <link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/css/tableexport.css" rel="stylesheet">
	
	<style>
		body {
		  margin-right: auto;
		  margin-left: auto;
		  padding-left: 15px;
		  padding-right: 15px;
		}
		table,
		th,
		td {
		  border: 1px solid black;
		}
		table {
		  width: 50%;
		}
	</style>
	
</head>
<body>

	<h3>TableExport</h3>

	<p>The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.</p>
	
    <table id="export-data">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td>Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.10/xlsx.core.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blob-polyfill/1.0.20150320/Blob.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/js/tableexport.min.js"></script>

	<script>

		TableExport(document.getElementsByTagName("table"), {
			headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
			footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
			formats: ['xlsx', 'csv', 'txt'],             // (String[]), filetype(s) for the export, (default: ['xls', 'csv', 'txt'])
			filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')
			bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: true)
			exportButtons: true,                        // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
			position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
			ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
			ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
			trimWhitespace: true                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
		});

	</script>

</body>
</html>

ตัวอย่างการแสดงผล

จะเห็นว่า TableExport จะสร้างปุ่ม Export ให้เราอัตโนมัติหากไม่มีอะไรผิดพลาดสามารถกด Export แล้วจะได้ไฟล์ทันทีครับ

ตัวอย่างการประยุกต์ใช้งานเพิ่มเติมกับ PHP และ ฐานข้อมูล MySQL

ตัวอย่างฐานข้อมูลตัวอย่าง

create table export_table (
	id INT,
	fullname VARCHAR(50),
	position VARCHAR(50),
	department VARCHAR(50),
	company VARCHAR(50)
);
insert into export_table (id, fullname, position, department, company) values (1, 'Kip Dukelow', 'Operator', 'Legal', 'Schroeder Group');
insert into export_table (id, fullname, position, department, company) values (2, 'Krissie Peak', 'Nurse Practicioner', 'Legal', 'Grimes-MacGyver');
insert into export_table (id, fullname, position, department, company) values (3, 'Gibby Skipsea', 'Payment Adjustment Coordinator', 'Marketing', 'Parisian, Reichert and Lueilwitz');
insert into export_table (id, fullname, position, department, company) values (4, 'Rica Baudasso', 'Executive Secretary', 'Services', 'Ankunding-Frami');
insert into export_table (id, fullname, position, department, company) values (5, 'Bette-ann Brennon', 'Senior Editor', 'Sales', 'Schaden-Smitham');
insert into export_table (id, fullname, position, department, company) values (6, 'Micky Rengger', 'Database Administrator III', 'Marketing', 'Stokes and Sons');
insert into export_table (id, fullname, position, department, company) values (7, 'Vanna Lammertz', 'Occupational Therapist', 'Legal', 'Ondricka, Osinski and Grant');
insert into export_table (id, fullname, position, department, company) values (8, 'Baird Swatheridge', 'Web Designer IV', 'Engineering', 'Hessel Inc');
insert into export_table (id, fullname, position, department, company) values (9, 'Reggy Sterman', 'Compensation Analyst', 'Engineering', 'Larson Group');
insert into export_table (id, fullname, position, department, company) values (10, 'Ward Dict', 'Nuclear Power Engineer', 'Marketing', 'Ullrich-Feil');

นำเข้า Css Bootstarp

ใน TableExport เราสามารถใช้ความสามารถของ Bootstrap ในการเพิ่มความสวยงานให้กับ Table ได้

<!--นำเข้า Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >

<!--นำเข้า TableExport.css -->	
<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/css/tableexport.css" rel="stylesheet">

สร้าง Table โดยมีการแสดงผลข้อมูลจาก PHP/MySQL

ค่าเริ่มต้นเมื่อ Export เราจะได้ไฟล์ที่มีชื่อเหมือนกับ id ของ Table ตัวอย่างเมื่อ Export จะได้ไฟล์  export-data.xlsx

		<table class="table" id="export-data">
			<thead>
				<tr>
					<th>ID</th>
					<th>Fullname</th>
					<th>Position</th>
					<th>Department</th>
					<th>Company</th>
				</tr>
			</thead>
			<tbody>
				<?php

					$servername = "localhost";
					$username = "root";
					$password = "";
					$db_name = "demo2";

					// สร้างการเชื่อมต่อฐานข้อมูล
					$conn = mysqli_connect($servername, $username, $password,$db_name);

					//กำหนด charset ให้เป็น utf8 เพื่อรองรับภาษาไทย
					mysqli_set_charset($conn,"utf8");

					// ตรวจสอบการเชื่อมต่อฐานข้อมูล
					if (!$conn) {
						
						//กรณีเชื่อมต่อไม่ได้
						die("Connection failed: " . mysqli_connect_error());
					}
					
					$sql = "SELECT * FROM export_table";

					$result = mysqli_query($conn, $sql);

					if (mysqli_num_rows($result) > 0) {
				
						while ($row = mysqli_fetch_assoc($result)) {

							echo "<tr>";
							echo "<td>".$row['id']."</td>";
							echo "<td>" . $row['fullname'] . "</td>";
							echo "<td>" . $row['position'] . "</td>";
							echo "<td>" . $row['department'] . "</td>";
							echo "<td>" . $row['company'] . "</td>";
							echo "</tr>";
						}
					} else {
						echo "<tr><td></td><td></td><td></td><td></td></tr>";
					}

					mysqli_close($conn);
				?>

			</tbody>
		</table>

เรียกใช้งานฟังชั่น TableExport  โดยจะมีการกำหนดค่า Properties ดังนี้

	<script>
	
		TableExport(document.getElementsByTagName("table"), {
			headers: true,                              
			footers: true,                              
			formats: ['xlsx', 'csv', 'txt'],             
			filename: 'id', // กำหนดให้ใช้ชื่อไฟล์เป็นชื่อเดียวกับ id ของ table
			bootstrap: true, //กำหนดให้แสดงปุ่ม Export ในรูปแบบของ Bootstrap
			exportButtons: true, 
			position: 'top',//กำหนดตำแหน่งของ ปุ่ม export ให้อยู่ด้านบน
			ignoreRows: null,
			ignoreCols: null, 
			trimWhitespace: true 
		});

	</script>

ตัวอย่างไฟล์แบบเต็ม

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TableExport</title>
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
	
    <link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/css/tableexport.css" rel="stylesheet">
	
</head>
<body>

	<div class="container">
	
		<h3>TableExport</h3>

		<p>The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.</p>
		
		<table class="table" id="export-data">
			<thead>
				<tr>
					<th>ID</th>
					<th>Fullname</th>
					<th>Position</th>
					<th>Department</th>
					<th>Company</th>
				</tr>
			</thead>
			<tbody>
				<?php

					$servername = "localhost";
					$username = "root";
					$password = "";
					$db_name = "demo2";

					// สร้างการเชื่อมต่อฐานข้อมูล
					$conn = mysqli_connect($servername, $username, $password,$db_name);

					//กำหนด charset ให้เป็น utf8 เพื่อรองรับภาษาไทย
					mysqli_set_charset($conn,"utf8");

					// ตรวจสอบการเชื่อมต่อฐานข้อมูล
					if (!$conn) {
						
						//กรณีเชื่อมต่อไม่ได้
						die("Connection failed: " . mysqli_connect_error());
					}
					
					$sql = "SELECT * FROM export_table";

					$result = mysqli_query($conn, $sql);

					if (mysqli_num_rows($result) > 0) {
				
						while ($row = mysqli_fetch_assoc($result)) {

							echo "<tr>";
							echo "<td>".$row['id']."</td>";
							echo "<td>" . $row['fullname'] . "</td>";
							echo "<td>" . $row['position'] . "</td>";
							echo "<td>" . $row['department'] . "</td>";
							echo "<td>" . $row['company'] . "</td>";
							echo "</tr>";
						}
					} else {
						echo "<tr><td></td><td></td><td></td><td></td></tr>";
					}

					mysqli_close($conn);
				?>

			</tbody>
		</table>
		
	</div>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.10/xlsx.core.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blob-polyfill/1.0.20150320/Blob.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/4.0.11/js/tableexport.min.js"></script>

	<script>
	
		TableExport(document.getElementsByTagName("table"), {
			headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
			footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
			formats: ['xlsx', 'csv', 'txt'],             // (String[]), filetype(s) for the export, (default: ['xls', 'csv', 'txt'])
			filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')
			bootstrap: true,                           // (Boolean), style buttons using bootstrap, (default: true)
			exportButtons: true,                        // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
			position: 'top',                            // (top, bottom), position of the caption element relative to table, (default: 'bottom')
			ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
			ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
			trimWhitespace: true                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
		});

	</script>

</body>
</html>

ตัวอย่างการแสดงผล จะเห็นว่าตารางข้อมูลของเรามีความสวยงามมากยิ่งขึ้น

Demo

Download SourceCode

สำหรับในบทความนี้ขอจบลงเพียงเท่านี้หวังว่าคงเป็นประโยชน์และช่วยลดเวลาในการทำงานกับผู้ที่สนใจบ้างไม่มากก็น้อย

ขอบคุณครับ

 


Deprecated: Function create_function() is deprecated in /home/service1/domains/monkeywebstudio.com/public_html/wp-content/plugins/simple-lightbox/controller.php on line 1642