I have been trying to figure this out for dayyys, please help. I have the task of downloading a pdf returned from an api response and Ive finally gotten it to download in the browser but when I open the download it shows an error loading. I do not fully understand what Im doing and that is definitely the problem I found a solution here on medium that helped me get to where I am now. I'm afraid it may not be working because the origin of the url is not the same as the website. But Im not sure.

Enough rambling this is my code:

const DowloadAndNext = () => {
    const link = document.createElement("a");
    link.href = pdfURL;
    link.setAttribute("download", pdfName);
    document.body.appendChild(link);
    link.click();

    props.onReviewNote();
  };

return(
         <Button className="save-sign-note" onClick={() => DowloadAndNext()}>
             
              Download and Next <RightArrow />
            
            </Button>
)

I'm unsure why the download is not happening properly pdfURL is the url returned from the api. (side note: I can not directly use an anchor tag for this as the url has a different origin and the expected outcome is not to open a new tab or load the pdf in the current tab but only to download to computer) and Im not sure if this will give me the same outcome as just using the anchor tag or if this can work. Im new to this so any advice would be super helpful. Thanks in advance.