สร้าง barcode ด้วย JsBarcode library ได้ง่ายๆ

12 March 2019 By Ninenik Narkdee
barcode jsbarcode

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ barcode jsbarcode



เนื้อหาบทความต่อไปนี้ จะมาแนะนำ javascript library ที่ใช้สำหรับสร้าง barcode 
ซึ่งเป็นรูปแบบการทำงานฝั่ง client สำหรับการสร้าง barcode ในรูปแบบการทำงานฝั่ง 
server ด้วย php สามารถดูได้ที่บทความตามลิ้งค์ด้านล่าง
    การใช้งาน PHP Barcode Generator และประยุกต์ ร่วมกับ Intervention Image http://niik.in/826 
    http://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 จะใช้ค่านี้แทน
 
&#10; แทน \n ขึ้นบรรทัดใหม่
&#13; แทน \r ขึ้นบรรทัดใหม่
&#9;   แทน \t  เว้นวรรค tab
 
ตัวอย่าง
 
<svg class="barcode"
  jsbarcode-value="123456&#13;&#10;7890">
</svg>
<script type="text/javascript">
	JsBarcode(".barcode").init();	
</script>
 
 
หวังว่าเนื้อหาเกี่ยวกับการใช้งาน JsBarcode จะสามารถนำไปประยุกต์ใช้ต่อไปได้





เพียงกด Like หรือ Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: jsbarcode barcode







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ