How can I generate a PDF representation of an org chart created using react-d3-tree in a React application?

Question

I'm working on a React application where I've used the react-d3-tree library to create an interactive org chart visualization. The org chart can become quite large, and I need to provide a feature for users to export the org chart as a PDF document for easy sharing and printing.

I've considered using react-to-print library to capture the org chart as an image and then add it to a PDF document. However, I'm unsure about the best approach to integrate this with my existing React component. I need to visualize org-chart in a one page without scrolling.

  return (
      <Box style={{ height: '100vh'}}>
        <Box style={{ position: "fixed", bottom: 50, right: 20 }}>
          <ReactToPrint
            trigger={() => <Button>Print Org Chart</Button>}
            content={() => printableRef.current}
            documentTitle="WSO2 ORG CHART"
            pageStyle="print"
          />
        </Box>

        {treeData.state === "loading" && (
          <Backdrop
            sx={{ color: "#034", zIndex: (theme) => theme.zIndex.drawer + 1 }}
            open={open}
            onClick={handleClose}
          >
            <CircularProgress color="inherit" />
          </Backdrop>
        )}

        {treeData.state === "failed" && (
          <>
            <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
              <Alert
                variant="filled"
                severity="warning"
                sx={{ width: "100%" }}
                onClose={handleClose}
              >
                No Subordinates Found !
              </Alert>
            </Snackbar>
          </>
        )}

        {(treeData.state === "success" || treeData.state === "failed") && (
          <div ref={printableRef}>
            <Tree
              data={transformedTreeData}
              orientation="vertical"
              translate={treeConfig.translate}
              nodeSize={nodeSize}
              pathFunc="step"
              scaleExtent={{ max: 1.5, min: 0.2 }}
              zoomable={false}
              zoom={zoomLevel}
              transitionDuration={treeConfig.transitionDuration}
              enableLegacyTransitions={true}
              renderCustomNodeElement={(rd3tProps) =>
                renderForeignObjectNode({ ...rd3tProps, foreignObjectProps })
              }
            />
          </div>
        )}
        </Box>
  );
};

export default OrgChart;