I am not able to download a file in iOS. This is what I have for the moment, the code is working for Windows and Android, using Chrome.
For iOS, the download tab is not popping up.Based on what I know, this is due to some security limitations of the OS.
I am providing my code, would be happy to receive some suggestions what I can optimize in order to work for iOS as well. Thanks
Document Service:
import { HttpClient, HttpHeaders, HttpParams, HttpHeaderResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppConfigService } from '../app-config.service';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { tap, map } from 'rxjs/operators';
import { Config } from 'protractor';
@Injectable({
providedIn: 'root'
})
export class DocumentService {
private dataUrl: string;
private options: object;
private getFile: string = '/getFile';
private documentIndex: string;
constructor(private http: HttpClient, private appConfigService: AppConfigService, private router: Router) {
this.dataUrl = appConfigService.config.baseUrl;
}
getDocument(documentIndex: string): Observable<Blob> {
this.documentIndex = documentIndex;
this.options = {
headers: new HttpHeaders({
'X-Ibm-Client-Id': this.appConfigService.config.clientIdDocumentService
},
),
params: new HttpParams().set('documentIndex', this.documentIndex),
responseType: 'blob',
observe: 'response'
};
// return this.http.get(this.dataUrl + this.getFile, this.options).pipe(tap({
return this.http.get<Blob>(this.dataUrl + this.getFile, this.options).pipe(tap({
error: (res) => {
let status = res.status;
let message = res.statusText;
this.router.navigate(['/error', status, message]);
}
}
),
);
}
}
Component:
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DocumentService } from 'src/app/services/documents.service';
import { saveAs } from "file-saver";
@Component({
selector: 'app-documents',
templateUrl: './documents.component.html',
styleUrls: ['./documents.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DocumentsComponent implements OnInit {
documentData: any;
documentIndex: string;
header: string;
@Input() documentsItems: string[];
imageBlobUrl: string;
elementBody: any;
fileUrl: any;
sanitizer: any;
constructor(private documentService: DocumentService, private route: ActivatedRoute) { }
ngOnInit() {
}
getDocument(documentIndex: string): void {
this.documentIndex = documentIndex.split('=')[1];
this.documentService.getDocument(this.documentIndex).subscribe(documentData => {
this.documentData = documentData;
this.header = this.documentData.headers.get('content-disposition');
this.elementBody = this.documentData['body'];
const file = new Blob([this.elementBody], {});
var result = this.header.split(';')[1].trim().split('=')[1].split('"')[1];
var chartTitle = decodeURI((result));
var browser = this.getBrowserName();
console.log(browser);
const url = window.URL.createObjectURL(file);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = chartTitle;
document.body.appendChild(a);
a.click();
})
}
public getBrowserName() {
const agent = window.navigator.userAgent.toLowerCase()
switch (true) {
case agent.indexOf('edge') > -1:
return 'edge';
case agent.indexOf('opr') > -1 && !!(<any>window).opr:
return 'opera';
case agent.indexOf('chrome') > -1 && !!(<any>window).chrome:
return 'chrome';
case agent.indexOf('trident') > -1:
return 'ie';
case agent.indexOf('firefox') > -1:
return 'firefox';
case agent.indexOf('safari') > -1:
return 'safari';
default:
return 'other';
}
}
download(base64, fileName) {
const a = document.createElement("a")
a.href = base64
a.style.display = 'none'
a.download = fileName
document.body.appendChild(a)
a.click()
}
}
View:
<table>
<thead>
<tr>
<th>Document name</th>
<th>Download document</th>
</tr>
</thead>
<tbody *ngIf="documentsItems">
<tr *ngFor="let item of documentsItems">
<td>{{item.documentName}}</td>
<td> <button class='button' (click)='getDocument(item.documentIndexInOmniDocs)'>
Download
</button></td>
</tr>
</tbody>
</table>
