เนื้อหาบทความต่อไปนี้ จะมาแนะนำ javascript library ที่ใช้สำหรับสร้าง barcode
ซึ่งเป็นรูปแบบการทำงานฝั่ง client สำหรับการสร้าง barcode ในรูปแบบการทำงานฝั่ง
server ด้วย php สามารถดูได้ที่บทความตามลิ้งค์ด้านล่าง
การใช้งาน PHP Barcode Generator และประยุกต์ ร่วมกับ Intervention Image http://niik.in/826
https://www.ninenik.com/content.php?arti_id=826 via @ninenik
JsBarcode
การสร้าง barcode ด้วย javascript library สามารถทำได้ง่ายๆ ด้วยขึ้นตอนและวิธีที่ไม่ยุ่งยาก
ในที่นี้เราจะใช้ JsBarcode library
สามารถศึกษารายละเอียดเพิ่มเติมได้ที่ https://lindell.me/JsBarcode/
การเรียกใช้งาน
เพียง กำหนดการเรียกไฟล์ JsBarcode.all.min.js ดังนี้
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
หรือเราจะทำการ ดาวน์โหลดไฟล์จาก cdn ตามลิ้งค์ด้านบน แล้วเรียกใช้จากเว็บไซต์ของเราก็ได้
โดยกำหนด path ไฟล์ให้ถูกต้อง
<script src="JsBarcode.all.min.js"></script>
การสร้าง barcode
สำหรับรายละเอียดเกี่ยวกับประเภทของ barcode จะขอข้ามไป สามารถหาอ่านรูปแบบของ barcode
ได้ตามเว็บไซต์ทั่วไป
การสร้าง barcode ด้วย JsBarcode สามารถใช้แท็ก HTML เพื่อแสดงรูป barcode ได้ 3 แบบคือ
<svg> สำหรับรูปภาพแบบ image vector
<canvas> สำหรับรูปภาพแบบ image pixels
<img> สำหรับรูปภาพแบบ image pixels
ซึ่งแนะนำให้ใช้เป็นแบบ svg ที่รองรับรูปภาพแบบ vector เพราะจะทำไห้ได้ภาพที่คมชัด เมื่อมีการย่อหรือขยาย
รูปภาพ การใช้รูปแบบ vector ถึงจะได้ภาพที่คมชัด แต่ก็จะทำงานหนักขึ้นด้วย หากแสดงในอุปกรณ์ที่สเปคต่ำๆ
หรือมีการสร้าง barcode พร้อมกันจำนวนมากๆ อย่างไรก็ตามโดยทั่วไปแล้วยังถือว่าสามารถใช้งานได้
รูปแบบที่จะใช้ จะใช้เป็น
<svg id="barcode"></svg> <!-- หรือ --> <canvas id="barcode"></canvas> <!-- หรือ --> <img id="barcode"/>
ในที่นี้เราจะใช้เป็น
<svg id="barcode"></svg>
หลักๆ เวลาเรียกใช้งานเพื่อสร้าง barcode ผ่าน javascript เราจะอ้างอิงผ่าน id แต่เราสามารถที่จะกำหนดเป็น
css class ก็ได้ เช่น กำหนดเป็น
<svg class="barcode"></svg> <!-- หรือ กำหนด หลายๆ css class เพื่อกำหนด style เพิ่มเติมก็ได้ --> <svg class="mycss mybarcode"></svg>
การ generate barcode
เราจะเรียกใช้คำสั่งง่ายๆ ดังนี้
<script type="text/javascript">
// JsBarcode("element selector", "ค่าหรือข้อความที่จะแสดง");
JsBarcode("#barcode", "ninenik.com"); // กรณีใช้ผ่าน id
// JsBarcode(".mybarcode", "ninenik.com"); // กรณีใช้ผาน css class
</script>
ไฟล์ตัวอย่าง barcode_demo.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JsBarcode</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>
<body>
<br />
<br />
<style type="text/css">
.mycss{
border:1px solid #CCC;
padding:10px;
}
</style>
<div style="width:500px;margin:auto;">
<svg id="barcode"></svg>
<br>
<svg class="mycss mybarcode"></svg>
</div>
<script type="text/javascript">
// JsBarcode("element selector", "ค่าหรือข้อความที่จะแสดง");
JsBarcode("#barcode", "ninenik.com"); // กรณีใช้ผ่าน id
JsBarcode(".mybarcode", "ninenik.com"); // กรณีใช้ผาน css class
</script>
</body>
</html>
จากรูปแบบโค้ดด้านบน สังเกตในส่วนของการเรียกใช้งานผ่าน css class เราได้กำหนด css class สองตัว
ตัวแรกสำหรับสร้าง css style เพิ่มเติม ซึ่งจะไม่เกี่ยวกับการ generate ของ JsBarcode ส่วนตัวที่สอง
mybarcode เป็นตัวที่เราเรียกใช้งาน และ generate barcode ด้วย JsBarcode
กรณีใช้งานรวมกับ jquery เราสามารถเรียกใช้ในรูปแบบดังนี้ได้
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script type="text/javascript">
$(function(){
$("#barcode").JsBarcode("ninenik.com"); // กรณีใช้ผ่าน id
$(".mybarcode").JsBarcode("ninenik.com"); // กรณีใช้ผาน css class
});
</script>
ค่าเริ่มต้น กรณีเราไม่ได้กำหนด option เพิ่มเติม จะเป็นตามตารางด้านล่าง เราสามารถ
ปรับเปลี่ยนค่าต่างๆ ตามต้องการ
| Option | คำอธิบาย | ค่าเริ่มต้น | ประเภทข้อมูล |
|---|---|---|---|
| format | รูปแบบของ barcode | "auto" (CODE128) | String |
| width | ความหน้าของเส้น bar หน่วย px | 2 | Number |
| height | ความสูงของแถบเส้น bar | 100 | Number |
| displayValue | ให้แสดงค่าข้อมูลหรือไม่ true | false | true | Boolean |
| fontOptions | ลักษณะของฟอนท์ที่แสดง ตัวหนา ตัวเอียง ตัวหนาและเอียง bold | italic | bold italic |
"" | String |
| font | ชื่อฟอนท์ที่จะใช้ monospace | sans-serif | serif | fantasy | cursive | "monospace" | String |
| textAlign | การจัดข้อความ left | center | right | "center" | String |
| textPosition | ตำแหน่งข้อความด้านบนหรือด้านล่าง top | bottom | "bottom" | String |
| textMargin | ระยะห่าง barcode กับข้อความ | 2 | Number |
| fontSize | ขนาดของฟอนท์ข้อความ | 20 | Number |
| background | ค่าสีพื้นหลัง | "#ffffff" | String (CSS color) |
| lineColor | สีของ barcode และข้อความ | "#000000" | String (CSS color) |
| margin | ระยะห่าง barcode กับขอบทั้งสี่ด้าน | 10 | Number |
| marginTop | ระยะห่าง barcode กับขอบด้านบน | undefined | Number |
| marginBottom | ระยะห่าง barcode กับขอบด้านล่าง | undefined | Number |
| marginLeft | ระยะห่าง barcode กับขอบด้านซ้าย | undefined | Number |
| marginRight | ระยะห่าง barcode กับขอบด้านขวา | undefined | Number |
| valid | ฟังก์ชั่นเพิ่มเติม | function(valid){} | Function |
กรณีกำหนด options เพิ่มเติม สามารถทำได้ 2 รูปแบบดังนี้
แบบแรก กำหนดตอนเรียกใช้งาน ใน javascript เช่น
<script type="text/javascript">
JsBarcode("#barcode", "ninenik.com",{
font:"fantasy",
lineColor:"red"
});
</script>
แบบที่สอง กำหนดใน HTML
<svg class="barcode" jsbarcode-value="ninenik.com" jsbarcode-font="fantasy" jsbarcode-linecolor="red"> </svg>
และเวลาเรียกใช้ ใช้คำสั่ง init();
<script type="text/javascript">
JsBarcode(".barcode").init();
</script>
สังเกตว่า options ที่กำหนดใน html จะขึ้นต้นด้วย jsbarcode- แล้วต่อด้วย option ที่ต้องการ โดยกำหนดเป็น
ตัวพิมพ์เล็ก จะต่างจากการกำหนดใน javascript ที่ต้องใช้ตามรูปแบบค่า เช่น lineColor ใน js และ linecolor
ใน html
กรณีที่เราต้องการสร้าง barcode หลายๆ อัน โดยใช้รูปแบบ option เหมือนกัน เราสามารถกำหนด
เป็นดังนี้ได้
<svg class="barcode"
jsbarcode-value="ninenik.com">
</svg>
<svg class="barcode"
jsbarcode-value="niik.in">
</svg>
<script type="text/javascript">
JsBarcode(".barcode").options({
font:"fantasy",
lineColor:"red"
}).init();
</script>
กรณีข้างต้นด้านบน เช่น ว่าเราวนลูปดึงข้อมูลจากฐานข้อมูล เพื่อนำค่ามาใช้ในการกำหนดใน
jsbarcode-value แต่ไม่ต้องการกำหนดรูปแบบเข้าไปในทุกๆ อัน และต้องการที่จะเรียกใช้รูปแบบ option
ครั้งเดียวตอนเรียกใช้ ก็สามารถใช้วิธีตามด้านบนได้
การขึ้นบรรทัดใหม่และ tab เว้นวรรค ใน barcode เราสามารถใช้
\n หรือ \x0A ขึ้นบรรทัดใหม่
\r หรือ \x0D ขึ้นบรรทัดใหม่
\t หรือ \x09 เว้นวรรค tab
แทรกไปในค่าข้อมูลได้ โดยค่าเหล่านี้จะแทรกในส่วนของ javascript
สังเกตว่า \r และ \n จะใช้ขึ้นบรรทัดใหม่เหมือนกัน แต่เวลาถูกนำไปใช้
ก็จะขึ้นกับตัวเครื่องมือหรือหัวอ่าน scan barcode โดยทั่วไป เครื่องอ่าน จะรองรับ \r ส่วน ถ้าใช้
พวก app ก็จะรองรับ \n ดังนั้นลองทดสอบปรับใช้ให้ถูกต้อง หรือจะกำหนดทั้งสองค่าเข้าไปด้วยก็ได้
เป็น \r\n
ตัวอย่าง
<svg class="barcode">
</svg>
<script type="text/javascript">
JsBarcode(".barcode", "123456\r\n789");
</script>
กรณีแทรกใน html จะใช้ค่านี้แทน
แทน \n ขึ้นบรรทัดใหม่
แทน \r ขึ้นบรรทัดใหม่
	 แทน \t เว้นวรรค tab
ตัวอย่าง
<svg class="barcode"
jsbarcode-value="123456 7890">
</svg>
<script type="text/javascript">
JsBarcode(".barcode").init();
</script>
หวังว่าเนื้อหาเกี่ยวกับการใช้งาน JsBarcode จะสามารถนำไปประยุกต์ใช้ต่อไปได้
