javascript using fileReader download file cannot give filename

Hi all hard-working developer:

Recently I got an issue regarding the file download using javascript/react. I'm got the code working on desktop and android browser. However, when I'm using chrome on ios(iPhone/iPad), after I click the download button, there is always download a file with name 'document'. (the file name and extension is not given correctly.). I've add download attribute to a tage.

Here are my js code:
  const reader = new FileReader();
        reader.readAsDataURL(blob); 
        reader.onload = e => {
          const tempLink = document.createElement('a');
          tempLink.style.display = 'none';
          tempLink.href = e.target.result as string;
          tempLink.download = fileName; // some props receive from the component.
          document.body.appendChild(tempLink);
          tempLink.click();
          document.body.removeChild(tempLink);
        }


This part of code can trigger the download but the filename and the extension is not correct.(But if I add .pdf for example, the file can open correctly.)

Can someone help me on this issue?

The expect result is pop up the download with the correct filename and extension.

Thanks for you all!