Can't read the data of 'report.pdf'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ? at http://localhost:3000/static/js/bundle.js:47308:41

[allenhack638]

Objective is :- Generate the pdf using toPDF, return it and save it using the zip.file, then download the zip file.

 const { toPDF, targetRef } = usePDF();
  const options = {
    filename: "page.pdf",
    method: "build",
    page: {
      margin: 5,
    },
    overrides: {
      pdf: {
        compress: true,
      },
    },
  };
  const handleGeneratePDF = async () => {
    const val = await toPDF(options);
    console.log("PDF has been generated", val);
    return val;
  };
  
 const downloadHtml = async () => {
 var zip = new JSZip();
  zip.file("report.pdf", await handleGeneratePDF());
    zip
      .generateAsync({
        type: "blob",
      })
      .then(function (content) {
        saveAs(content, "cdr.zip");
      });
      }
  
    <Button
    variant="primary"
    onClick={async () => {
      await downloadHtml();
    }}
  >
    Download PDF
  </Button>
  

[ivmarcos]

Try converting to a Blob first.

const handleGeneratePDF = async () => {
    const pdfInstance = await toPDF(options);
    return new Blob([pdfInstance.output("blob")], {
      type: "application/pdf",
    });
  };