I have a pdf I am receiving from an api call and I want to accomplish downloading the file to my computer without it opening a new tab or opening the url in the current tab I have open. I realize this is a question frequently asked but all I can find are examples accomplishing the opening new tab or loading in the current tab.

Ive tried using an tag like:

         <Button
              className="save-sign-note"
            >
              <a href={pdfURL} download={`${props.visitType}`}>
              Download and Next <RightArrow /> 
              </a>
            </Button>

and this downloads the file in the current window.

Also Ive tried using a handler like:

<Button
onClick={() => DowloadAndNext()}
>...

const DowloadAndNext = () => {
     window.location.href = pdfURL;
  };

and

<Button
onClick={() => DowloadAndNext()}
>...

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

but I get the same result each time. Any help with this would be awesome as I am new to developing front end.