How to print multiple barcode on single page in React?

Syncfusion Barcode provides a comprehensive solution for generating and scanning barcodes across various applications. With support for various barcode types like QR Code, Code 128, and UPC-A, it effectively caters to diverse use cases.

However, we currently lack built-in support for printing multiple barcodes on a single page. To overcome this limitation, we offer a workaround involving the conversion of each barcode into a separate base64 format. Subsequently, the window.open method is utilized to create a new print window, where the base64 images are appended for printing.

Render Multiple Barcodes

In HTML file create separate div element for each barcode and define different barcodes separately.

<div id="label">
             <div className="row">
               <BarcodeGeneratorComponent
                 id="barcode1"
                 ref={(barcode) => (barcodeInstance = barcode)}
                 width={'200px'}
                 height={'150px'}
                 mode="SVG"
                 type="Code128B"
               ></BarcodeGeneratorComponent>
             </div>
             <div className="row">
               <BarcodeGeneratorComponent
                 id="barcode2"
                 ref={(barcode) => (barcodeInstance1 = barcode)}
                 width={'200px'}
                 height={'150px'}
                 mode="SVG"
                 type="Code128B"
               ></BarcodeGeneratorComponent>
             </div>
             <div className="row">
               <BarcodeGeneratorComponent
                 id="barcode3"
                 ref={(barcode) => (barcodeInstance2 = barcode)}
                 width={'200px'}
                 height={'150px'}
                 mode="SVG"
                 type="Code128B"
               ></BarcodeGeneratorComponent>
             </div>
           </div>

To prepare print content:

Upon clicking the button, a new browser tab is opened using window.open() and assigned to the variable printWindow. Then, the script iterates through each barcode element on the page, exporting them as base64-encoded images using the exportAsBase64Image(‘JPG’) method. The await keyword ensures that each barcode is exported asynchronously, allowing the script to retrieve the base64 data.

var printWindow = window.open('', 'image');
for (var i = 1; i <= 3; i++) {
   var barcode = document.getElementById('barcode' + i.toString())
     .ej2_instances[0];
   var data = await barcode.exportAsBase64Image('JPG');
   printWindow.document.write('<img src="' + data + '"/>');
 }

Next, we need to fill this new tab with the generated barcode images. We do this by using window.document.write(). This method lets us write content directly into the new tab’s document.
We write an image tag for each barcode, setting its source to the base64 data we got earlier. This way, each barcode gets displayed as an image in our new tab.

To print

A listener is added to the load event of the printWindow, ensuring that the printing process starts only after the new tab has fully loaded. Upon load, a timeout function is used to delay printing by 500 milliseconds to ensure all content is rendered properly. Finally, window.print() triggers the printing process for the content of the new tab.

printWindow.addEventListener('load', function (event) {
   setTimeout(function () {
     printWindow.window.print();
   }, 500);
 });

Finally, we close the document in the new tab using window.document.close() method.

 printWindow.document.close();

Sample:

Click here for sample