I am currently working on downloading a BLOB into a PDF file.

I have this snippet where it downloads the file. But when i try opening it, it says

"FAILED TO LOAD DOCUMENT"

const downloadFile = (blob, fileName) => {
    const link = document.createElement("a");
    // create a blobURI pointing to our Blob
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    // some browser needs the anchor to be in the doc
    document.body.append(link);
    link.click();
    link.remove();
    // in case the Blob uses a lot of memory
    setTimeout(() => URL.revokeObjectURL(link.href), 7000);
  };
  downloadFile(new Blob([journal]), "myfile.pdf");

  useEffect(() => {
    // setData();
    console.log(journal);
  }, []);

upon logging the blob we can see the object like this: