Html2canvas just giving horizontal half the componenthtml2canvas just giving horizontal half the component

Question

In my react app has 3 component and html2canvas just giving a half of the one component and other components are not true color.

      const exportPDF = () => {
        const input = document.getElementById("App");
        html2canvas(input, {
          useCORS: true,
          scrollX: -window.scrollX,
          scrollY: -window.scrollY,
        }).then((canvas) => {
          const imgWidth = 200;
          const imgHeight = (canvas.height * imgWidth) / canvas.width;
          const imgData = canvas.toDataURL("img/png");
          const pdf = new jsPDF("p", "mm", "a4");
          pdf.addImage(imgData, "PNG", 10, 10, imgWidth, imgHeight);
          pdf.save("ok.pdf");
        });
      };

and on return is :

    <div id="App">
      <Info />
      <Card />
      <Console />
    </div>

Info and Console components colors are not true and i just can't see Card components horizontal half

Answer 1

Actually i realized html2canvas can't process multiple layer on Reactjs and i solved my problem with "jspdf" package after all.