How to print multiple barcode on single page using JavaScript Barcode?

Syncfusion JavaScript 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 class="centercontrol" id="barcode1"></div>
   <div class="centercontrol" id="barcode2"></div>
   <div class="centercontrol" id="barcode3"></div>
   
   //Initializes barcode control
   var barcode1 = new ej.barcodegenerator.BarcodeGenerator({
     width: '200px',
     height: '150px',
     mode: 'SVG',
     type: 'Code128B',
     value: 'Syncfusion',
   });
   barcode1.appendTo('#barcode1');
   
   //Initializes barcode control
   var barcode2 = new ej.barcodegenerator.BarcodeGenerator({
     width: '200px',
     height: '150px',
     mode: 'SVG',
     type: 'Code128B',
     value: 'Syncfusion Barcode',
   });
   barcode2.appendTo('#barcode2');
   
   //Initializes barcode control
   var barcode3 = new ej.barcodegenerator.BarcodeGenerator({
     width: '200px',
     height: '150px',
     mode: 'SVG',
     type: 'Code128B',
     value: 'Syncfusion',
   });
   barcode3.appendTo('#barcode3');

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

Conclusion

I hope you enjoyed learning about how to print multiple barcode on single page using JavaScript Barcode.

You can refer to our JavaScript Barcode feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!