JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
    Test Download for Safari - mappite.org
  </h3>

<a id="aaa" href="#" target="_blank">Link 1</a> uses Blob
<br>
<a id="bbb" href="#" target="_blank">Link 2</a> uses href encoded.
<br>
<a id="ccc" href="#" target="_blank">Link 3</a> uses Blob without setting file name

JavaScript

var xmlFile = "<xml>Here is the file</xml>";

    var aLink = document.getElementById("aaa");
    aLink.addEventListener('click', function(e) {
        // Make blob URL
        var blobURL = URL.createObjectURL(new Blob([xmlFile], {type: 'application/gpx+xml'}));
        // Set file name
        aLink.download = 'test1.gpx';
        // Set href just in time
        aLink.href = blobURL;
        
    });

    var bLink = document.getElementById('bbb');
    bLink.onclick = function(code) {
        bLink.download = 'test2.gpx';
        this.href = 'data:application/gpx+xml;charset=utf-8,'
          + encodeURIComponent(xmlFile);
      };

    var cLink = document.getElementById("ccc");
    cLink.addEventListener('click', function(e) {
        // Make blob URL
        var blobURL = URL.createObjectURL(new Blob([xmlFile], {type: 'application/gpx+xml'}));
        // Set file name
        // Set href just in time
        cLink.href = blobURL;
        
    });