react-to-pdf icon indicating copy to clipboard operation
react-to-pdf copied to clipboard

Existing Issue: Images don't render properly

Open prof-awais opened this issue 11 months ago • 5 comments

react-to-pdf-svg-bug

Config:

version:  ["react-to-pdf": "^1.0.1", "next": "14.1.0"]
format: PNG

import { Margin, usePDF } from "react-to-pdf";

const { toPDF, targetRef } = usePDF({
    filename: "FileName",
    page: { margin: Margin.MEDIUM },
});

Hi, react-to-pdf initially worked perfectly for me but later I faced PNG image issue. Reason I don't know exactly but my usage is following.

<MuiDialog
        open={showLicense}
        onClose={() => setShowLicense(false)}
        // PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog-title"
        fullScreen
        scroll="paper"
        PaperProps={{ sx: { overflowX: "hidden" } }}
      >

                {/* App bar goes here  */}


        <MuiDialogContent sx={{ padding: "unset", minWidth: "2100px" }}>
          <section className="av-mx-8" ref={targetRef}>
            <section className="av-space-y-12 av-mb-14">
              <LcShowTitle variant="v1">3D Object License</LcShowTitle>
            </section>

            <LcShowClient
              data={CONTENT_LC_SHOW}
              licenseBinary={data?.binaryData}
              isPDF     // just responsible for conditional with of the sections. 
            />
          </section>
        </MuiDialogContent>
      </MuiDialog>

I have read the following issues but no solution found inside.

Relevant issues:

  • https://github.com/ivmarcos/react-to-pdf/issues/41 (svg)
  • https://github.com/ivmarcos/react-to-pdf/issues/68 (svg)
  • https://github.com/ivmarcos/react-to-pdf/issues/55
  • https://github.com/ivmarcos/react-to-pdf/pull/43
  • https://github.com/ivmarcos/react-to-pdf/issues/21

Please if there is something wrong is usage tell me.

prof-awais avatar Mar 28 '24 00:03 prof-awais