Is there a workaround to create a custom download link for safari 14?

The code above creates a temporal element <a> and download a file.

  function downloadFile(file) {
    var a = document.createElement("a");
    a.href = file.FileData;
    a.download = file.FileName;
    a.click();
  }

It works in Safari 13 but it stopped working in Safari 14 (tested in 14.0.1).

It seems the browser try to open a new tab with the file, a pdf in my case, but it gets prevented.

Not allowed to navigate top frame to data URL 'data:application/pdf;base64,JVBERi0xLjU...'

Did you find any workaround for this issue?

SOLUTION

Generating a Bob file instead solved my issue.

public async downloadFile() : Promise<void> {
        const aux: string = 'data:' + file.ContentType + ';base64,';
        let arraybuffer = this._base64ToArrayBuffer(file.FileData.substr(aux.length));
        // create the blob object with content-type "application/XXX"               
        let blob = new Blob( [arraybuffer], { type: file.ContentType });
        let url = URL.createObjectURL(blob);

        let a = document.createElement("a");
        a.href = url;
        a.download = file.FileName;
        a.click();
      }
    }
  }

  /**
   * It transform a string in base64 to an ArrayBuffer.
   * @param base64 string 
   */
  public _base64ToArrayBuffer(base64: string) : ArrayBuffer {
    // decode base64 string, remove space for IE compatibility
    var binary_string = window.atob(base64.replace(/\s/g, ''));
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }