How to print barcode in Angular

Syncfusion® Angular 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.

<input type="button" value="print" (click)="print()"/>

<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" height="150px" mode="SVG" type="Code39" value="SYNCFUSION"> </ejs-barcodegenerator>


 async print(){
   
 // Export the barcode as an image
 var data = await this.barcode.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