we are developping an app where we need to download a PDF file generated on the client side. We are using a string to feed the contents of the file into a data URL, like so:

const pdfContent = 'xxxxx';
    const element = document.createElement('a');
    element.setAttribute('href', `data:application/pdf;charset=utf-8,${encodeURIComponent(pdfContent)}`);
    element.setAttribute('download', 'mypdf.pdf');
    element.style.display = 'none';

    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);

This works very well using Microsoft Edge, but it bugs out in Safari saying 'not allowed to navigate top frame to data URL'.

The host application does not allow for window.open() or any such tricks, I tried using an iframe but it wouldn't work, amybe I did it wrong. I also tried other libraries like file-saver, save-file, all available on npm with the same result, cannot navigate top frame to data url.

Any hints? Thanks.