Scan and generate barcode with VueJS

Barcodes are used in almost every whole sale and retailer shop. These are long and unique strings that are attached to every product.

This article is divided into following two parts:

1. Generate barcode and used them inside PDF file.

2. Scan barcode (with scanner gun).

Following are the prerequisites for working on this project:

1. Node JS
2. npm
3. yarn
4. vuejs 3.0
5. vue cli 3.0

Following packages we use for this project:

1. jsbarcode
2. jspdf

Generate barcode and pdf downloads:

In this section, we will learn how to generate barcode using vue and then use them inside pdf file. First, I will show you the code and then will explain:

generateBarcode.js

In Order.vue component, we hard coded records and show them inside table. On clicking at generate barcode of any order, we pass order no to generateAndDownloadBarCode function.

Now inside generateBarcode.js file, we are doing following three things:

1. Convert order no to base64Image.
2. Convert base64Image to PNG image.
3. Use PNG image in pdf downloadable file. 

So, whenever you click on generate barcode, all steps will be followed and pdf file will be downloaded to your system. I added five barcodes but you can add single (change generateAndDownloadBarcodeInPDF function inside generateBarcode.js file).

Preview of generating barcode

Scan Barcode:

In this section, we will learn how to scan barcode with scan gun. You can use any barcode scan machine, I used Speed-X laser barcode scanner.

Speed-X Laser Bacode Scanner

Before explaining how it works with VueJS, let me share code first and then explains:

Barcode scanner just works like simple keyboard input, the only difference is that it reads the whole string in one go. Following will help you to explains how:

Scan barcode with scan gun

Some key issues:

I used scan device with VueJS 2.0, but it happens that whenever I scan barcode with this device, the browser page refreshed automatically. Even if I add preventDefault() but it does not work . If you find similar issue, then I suggest you to use VueJS watch property along with v-model.lazy binding. This will stop browser from refreshing and you can use new variable value inside your function.

Github link

shahmir811/vue-barcode