How to print barcode in Vue

Syncfusion® Vue Barcode control allows you to easily generate and display various types of barcodes on your application.

To print the barcode, we need to follow the below steps.

Step 1: Convert the barcode into an image format.

You can use the Syncfusion® Barcode control’s exportAsBase64Image() method to retrieve the barcode data as a base64-encoded image data.

Step 2: Write the image data to the print window
Use the document.write() method to display the barcode image on the print window by passing the retrieved barcode image data as a parameter.

Step 3: Print the window
Finally, you can use the window.print() method to print the contents of the print window.

Refer the code snippet below.

<template>
 <div class="content-wrapper" style="width: 100%; height: 590px">
   <button @click="print">Print</button>
     <ejs-barcodegenerator
     id="barcode"
     :invalid="invalidInput"
     ref="barcodeControl"
     :width="width"
     :height="height"
     :type="type"
     :value="value"
     :mode="mode"
   ></ejs-barcodegenerator>
 </div>
</template>

methods: {
   async print() {
     // Export the barcode as an image
     var data = await barCodeInstance.exportAsBase64Image('JPG');

     // Create an Image object and set its source to the barcode data
     var imge = new Image();
     imge.src = data;

     // Create a new window for printing and write the barcode image to it
     var printWind = window.open('', 'imge');
     printWind.document.write('<img src="' + data + '"/>');

     // Wait for the image to load in the print window, then print the window
     printWind.addEventListener('load', function (event) {
       setTimeout(function () {
         printWind.window.print();
       }, 500);
     });
     printWind.document.close();
   },
 }, 

Refer the below sample for reference

Sample: Click here