How to print barcode in React

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

<button onClick={print}>Print</button>

<BarcodeGeneratorComponent
   id="barcode"
   ref={(barcode) => (barcodeInstance = barcode)}
   width={'200px'}
   height={'150px'}
   mode="SVG"
   type="Code39"
   value="SYNCFUSION"
></BarcodeGeneratorComponent>

const print = async function () {

 // 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