Open a PDF file via JavaScript not supported in Safari 15.1 on IOS 15.1 in React

Question

Hi I have a React app with this code

const getThePdfFileUrl = async (fileName: string) => {
    try {
      setDebug("debugging started...")
      if (fileName && fileName !== "" && !isDownloading) {
        setDebug("API call done...")

  
        // window.open(pdfFileUrl, "_blank");
        const a = document.createElement("a");
        a.setAttribute("href", "http://www.africau.edu/images/default/sample.pdf");
        a.setAttribute("target", "_blank");
        a.setAttribute("rel", "noopener noreferrer");
        a.click();
        setDebug("All okay...")
      }
      
    } catch (error) {
      setDebug("error comes...")
      setDebug(`error is...${JSON.stringify(error)}`)

      console.log("pdf error:-",error);
    }
  };

I manage a component state to log the debugging logs. I can see the log "All okay". But this isn't open the link.

For the same web app, I add this code

  <a href="http://www.africau.edu/images/default/sample.pdf" target="_blank" rel="noopener noreferrer">some file</a>

This opens the link without any issue. What is the problem that this works in normal html and not work with the JavaScript?

Answer 1

I see a couple of possibilities:

1. Some browsers will ignore the click() call if the element isn't in the document (Firefox definitely used to, don't know if it still does). At one point, some browsers (including Firefox) required a brief delay after adding the element before they'd allow the click call as well. So it could be that Safari is behaving the same way.

2. You haven't shown how you call your function, but on nearly all browsers, it will need to be in direct response to a user action (like a button click). (A setTimeout scheduled in direct response to a user action is also usually allowed, as it traces back to a user action. That chain is easily broken, though.)

You can address #1 like this:

const a = document.createElement("a");
a.setAttribute("href", "http://www.africau.edu/images/default/sample.pdf");
a.setAttribute("target", "_blank");
a.setAttribute("rel", "noopener noreferrer");
document.body.appendChild(a); // ***
setTimeout(() => {            // ***
    a.click();
    setDebug("All okay...")
    document.body.removeChild(a); // *** You *might* need to put another `setTimeout` around this, but I don't think so
}, 70);                       // ***

How you address #2 will depend on information not in the question. Basically, though: make sure you call the function in direct response to a user action.