Cannot download file when using Chrome on an iOS device

Question

I am working on an Angular application which connects with a Web Api to download files as a Blob. The files get downloaded fine on all mobile devices with the exception of an iOS device only when using a Chrome browser. FYI, the files get downloaded fine when using the Safari browser on an iOS device.

Inside the WebApi I am setting the Content-Disposition header to "attachment", and setting the filename to the appropriate value, as below:

var result = new HttpResponseMessage(HttpStatusCode.OK);
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "test.pdf";
result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");

On the Angular side (front-end), I have tried two options:

• Option-1: Read the file using the FileReader, dynamically create a hyperlink with the href attribute set to the blob and the download property set to the filename, as below:

fetch(
    apiUrl, {
    method: 'get'
})
.then(response => response.blob())
.then(blob => {
    var reader = new FileReader();
    reader.onloadend = () => {
      this.prepareFile(reader.result, fileName);
    };
    reader.readAsDataURL(blob);
}); 

• Option-2: Fetch the file from the web api, create a blob object, and use the FileSaver.js library (https://github.com/eligrey/FileSaver.js/) to save the file, as below:

fetch(
    apiUrl, {
    method: 'get'
})
.then(response => response.blob())
.then(blobContent => {
    blob = new Blob([blobContent], { type: 'application/pdf' });
    saveAs(blob, 'test.pdf'); //using FileSaver.js library
});  

In Option-1, when using Chrome on iOS, the file downloads as "document" without any file extension.

In Option-2, when using Chrome on iOS, the file opens in Chrome, but when clicking on the "Open In" link in the browser, it displays the following "The file could not be downloaded at this time."

I would love to have any feedback, on the code above, or any work-arounds to download files when using Chrome on an iOS device.

Answer 1

Option 1 that you mentioned about file getting downloaded with the name "document' is an existing issue on chrome on ios https://bugs.webkit.org/show_bug.cgi?id=167341 https://bugs.chromium.org/p/chromium/issues/detail?id=1252380