reactjs - Issue with downloading react application component with html2pdf - Stack Overflow

admin管理员组

文章数量:1122846

I am facing an issue while using html2pdf with react application component which is crashing whenever save button for html2pdf function is called.

I have tried react-to-pdf and html2pdf.js both of them for getting the optimised approach as I have multiple plots in my application using plotly and whenever I am going to save that component as a pdf my app is crashing.

The issue I am facing is that whenever I am clicking on my handleDownloadPDF function which is using html2pdf library in it to convert my component which has alot of plotly plots in it is crashing my laptop as my ram usage is going above 5GB.

Code for handleDownloadPDF:

 const handleDownloadPDF = useCallback(
    () => {
      const element = targetRef.current;
      if (!element) return;

      // Create a detached clone to reduce DOM memory usage
      const clonedElement = element.cloneNode(true);

      // Options for html2pdf
      const options = {
        image: { type: "jpeg", quality: 0.7 }, // Lower quality to reduce size
        html2canvas: {
          scale: 1,
          logging: false,
          useCORS: true,
        },
        jsPDF: { unit: "in", format: "A4", orientation: "portrait" },
        pagebreak: { mode: "avoid-all" }, //Page break is theree to add page break for all the components.
      };

      // console.log("[*] Start Loading for Save");

      // Generate PDF
      const pdf = html2pdf().set(options);
      let pdfInstance = null;

      pdf
        .from(clonedElement)
        .toPdf()
        .get("pdf")
        .then((instance) => {
          pdfInstance = instance;
          const filename = "generated.pdf";
          pdfInstance.save(filename);
        })
        .finally(() => {
          //This is the cleanup part of code
          if (pdfInstance) {
            pdfInstance.internal.stream = null;
            pdfInstance = null;
          }

          clonedElement.remove();

          // Cleanup the canvas manually if created by html2canvas
          const canvases = document.querySelectorAll("canvas");
          canvases.forEach((canvas) => canvas.remove());

          // Trigger garbage collection in supported environments (for debugging)
          if (typeof window.gc === "function") {
            window.gc();
          }
        });
    },
    [targetRef]
  );

TargetRef Looks like and except for main plot every other plot has markers in it :
Code:

import Plot from "react-plotly.js";


<div className={"reportPrev"} ref={targetRef} id="reportPrev">
          <h2>EndureAir-Report</h2>
            <div className="mainplot-wrapper">
              <<Plot
        key={timestamp.date}
        data={plotlyLayout.data}
            </div>
<div >
              <<Plot
        key={timestamp.date}
        data={plotlyLayout.data1}
            </div>
<div>
              <<Plot
        key={timestamp.date}
        data={plotlyLayout.data2}
            </div>

<div >
              <<Plot
        key={timestamp.date}
        data={plotlyLayout.data3}
            </div>
        <div>
              <<Plot
        key={timestamp.date}
        data={plotlyLayout.data4}
            </div>
</div>

本文标签： reactjsIssue with downloading react application component with html2pdfStack Overflow