How to print multiple Diagrams in a single shot in React?

The Syncfusion® React Diagram control empowers rendering multiple diagrams within a single application and facilitates printing and exporting diagrams to various formats such as JPEG, PNG, PDF, and SVG. However, there is currently no direct support for printing multiple diagrams in a single click.

To overcome this limitation, a workaround entails converting each diagram into a separate base64 format. Subsequently, the window.open option is employed to generate a new print window, where the base64 images are appended for printing.

To render multiple diagrams:

In HTML file create separate div element for each diagram. Define different diagrams separately and initialize the nodes and connectors for each diagram individually for distinct configurations and management of nodes and connectors within each specific diagram instance.

<div className="content-wrapper" style={{ width: "100%" }}>
           Diagram1
          <div>
               <DiagramComponent id="diagram1" ref={diagram1 => (diagram1Instance = diagram1)} width={"100%"} height={"645px"} nodes={diagram1Nodes} getNodeDefaults={(obj)=>{
                   obj.height = 50;
                   obj.style = { fill: 'transparent', strokeWidth: 2 };
                   return obj;
               }}>
                   <Inject services={[UndoRedo,PrintAndExport]}/>
               </DiagramComponent>
         </div>
         Diagram2
         <div>
               <DiagramComponent id="diagram2" ref={diagram2 => (diagram2Instance = diagram2)} width={"100%"} height={"645px"} nodes={diagram2Nodes} getNodeDefaults={(obj)=>{
                   obj.height = 50;
                   obj.style = { fill: 'transparent', strokeWidth: 2 };
                   return obj;
               }}>
                   <Inject services={[UndoRedo,PrintAndExport]}/>
               </DiagramComponent>
         </div>
         Diagram3
         <div>
               <DiagramComponent id="diagram3" ref={diagram3 => (diagram3Instance = diagram3)} width={"100%"} height={"645px"} nodes={diagram3Nodes} getNodeDefaults={(obj)=>{
                   obj.height = 50;
                   obj.style = { fill: 'transparent', strokeWidth: 2 };
                   return obj;
               }}>
                   <Inject services={[UndoRedo,PrintAndExport]}/>
               </DiagramComponent>
         </div>
       </div>

To prepare print content:

Now, upon clicking the button, iterate the diagrams and export each diagram using the diagram.exportDiagram() method. This enables retrieval of the base64 data for each diagram, which is subsequently stored in a data collection array.

var data = diagram.exportDiagram({ mode: 'Data' });
dataCollection.push(data); 

The window.open() method is employed to launch a new browser window or tab. In this case, we create a new browser tab and assign it to the variable printWindow.

var printWindow = window.open('', 'imge');

For each exported diagram, a new Image object is instantiated, and its source is set to the exported data. The loaded images are then added to the ‘imgCollection’ array. Subsequently, we iterate through the ‘imgCollection’ to determine the height and width of each image. By utilizing printWindow.document.write, it becomes feasible to write HTML content to a document associated with a specified ‘printWindow’.

for (var j = 0; j < imgCollection.length; j++) {
       var height = imgCollection[j].height;
       var width = imgCollection[j].width;
       var divHeight = height < 900 ? '900px' : height + 'px';
       var divWidth = width < 900 ? '900px' : width + 'px';

       printWindow.document.write(
         '<div style="height: ' +
           divHeight +
           '; width:' +
           divWidth +
           ';page-break-after: always;"><img src="' +
           dataCollection[j] +
           '"/></div>'
       );
     }

The load event plays a crucial role in this context. It triggers when the ‘printWindow’ window has fully loaded, indicating that the content, styles, and transformations are in place. During this event, various styles are applied to the ‘printWindow’ window’s body to ensure proper width, height, and transformation properties. Additionally, the dimensions of the images are adjusted to fit within the print window’s dimensions while maintaining aspect ratios. The width and height are set to 100% to fill the entire window, while margin and padding are set to 0 to eliminate any unnecessary spacing. Overflow is hidden to prevent any content from extending beyond the window boundaries.

// All HTML has been written to document, initiate print
     printWindow.addEventListener('load', function (event) {
       printWindow.document.querySelector('body').style.width = '100%';
       printWindow.document.querySelector('body').style.height = '100%';
       printWindow.document.querySelector('body').style.margin = '0';
       printWindow.document.querySelector('body').style.padding = '0';
       printWindow.document.querySelector('html').style.overflow = 'hidden';
       printWindow.document.querySelector('body').style.transform =
         'rotate(90deg)';
       printWindow.document.querySelector('body').style.transformOrigin =
         'top left';
       var scaleFactor =
         printWindow.innerWidth / printWindow.document.body.offsetWidth;
       printWindow.document.querySelector('body').style.webkitTransform =
         'scale(' + scaleFactor + ')';
       printWindow.document.querySelector('body').style.transform =
         'scale(' + scaleFactor + ')';

       var images = printWindow.document.querySelectorAll('img');
       for (var i = 0; i < images.length; i++) {
         var pageWidth = printWindow.innerWidth;
         var pageHeight = printWindow.innerHeight;
         var widthRatio = pageWidth / images[i].width;
         var heightRatio = pageHeight / images[i].height;
         var scaleFactor = Math.min(widthRatio, heightRatio);
         var imageWidth = images[i].width - 50;
         var imageHeight = images[i].height;
          if (scaleFactor > 1) {
              scaleFactor = 1;
            }
         var newWidth = imageWidth * scaleFactor;
         var newHeight = imageHeight * scaleFactor;
         images[i].style.width = newWidth + 'px';
         images[i].style.height = newHeight + 'px';
       }

       setTimeout(function () {
         printWindow.window.print();
       }, 500);
     });

To Print:

A setTimeout function introduces a delay of 500 milliseconds before initiating the printing process. This delay allows time for the transformations and adjustments to take effect. Afterward, the print() method is called on the printWindow.window, triggering the printing of the prepared content. Finally, the printWindow.document.close() statement is used to close the document associated with the printWindow window.

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to print multiple Diagrams in a single shot in React.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Diagram and other components.

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