How to download locally generated text in a PWA?

I generated an XML String in JavaScript and I need to download it as a file. I tried both answers provided in here.

Answer 1

Answer 2

Both answers work perfectly fine on MacOS Safari, iOS Safari and Raspbian Chromium, but when I try to download within the PWA on the iPad iOS 12.1.4, it does simply nothing. No Errors in console either.

If I try downloading in a new tab, it just shows a white screen and nothing happens.

Replies

I've done some testing involving iOS 13.

It appears to be working on iOS 13, yet even the html5 attrbute 'download' to specify the file name works.

I ran into a possible bug though;

Using href for download pops up the iOS sharing menu but it does not let you close it. In order to use the app again, it needs to be closed.

Using window.open() it will let you close the sharing menu but the file name is not supported. Also a possible bug?

Anyway when I add target='_blank' to the href, it still does not let you give the option to close the sharing menu.

I came to a workaround for iOS 13 standalone PWA in case the bugs mentioned above will not be fixed:

function download(content)
{  
     var file = new Blob([content], 
                    { 
                         type: 'text/xml;charset=UTF-8' 
                    });
     var reader = new FileReader(); 
     reader.onload = function() 
                    { 
                         var popup = window.open(); 
                         var link = document.createElement('a');
                         link.setAttribute('href', reader.result);
                         link.setAttribute('download', 'filename.xml');
                         popup.document.body.appendChild(link); 
                         link.click(); 
                    } 
     reader.readAsDataURL(file); 
}

Working for me!


    function downloadPDF(url) { 
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function(e) {
        if (this.status == 200) {
          var myBlob = this.response;
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(myBlob);
          link.download = "yourname.pdf";
          link.click();
        }
      };
      xhr.send();
    }