Question

0

312

Vistas

Download File in Angular 2 (Download Pop-up not coming)

I have a view button and on click I am calling Web API to download the word document file.

WebAPI is working fine, when I paste the download URL in browser (for example http://localhost:50963/api/Download/1022), browser is showing a pop-up to save/cancel.

I wanted to have the same behavior, i.e. when user click on View button, I need to show above download pop-up. API is getting called successfully, see below screenshot

download.service.ts

export class DownloadService {

  constructor(private http: Http) {}

  private downloadUrl = 'http://localhost:50963/api/Download/';

  //Fetch all existing Templates
  DownloadDocument(Doc_Id: number){
      return this.http.get(this.downloadUrl + Doc_Id.toString())
  }
}

document-list.component.ts

DownloadArticle(Doc: ArticleModel){
        console.log("inside downloadarticle()",Doc.Doc_Id);
         this.downloadservice.DownloadDocument(Doc.Doc_Id)
                           .subscribe(                               
                                err => {                                    
                                    console.log(err);
                                });
    }

over 4 years ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-05-26T18:01:35.356Z

You need to do some workaround here. Angular 'http' service cannot give what you want. I pasted all my workable code here. You need to pick the part of your need.

retrieveJquery(fileId: number, fileName: string): void {
    let that = this;
    let useBase64 = false;

    let iOS = false;
    if (navigator.platform)
        iOS = /iPad|iPhone|iPod/.test(navigator.platform);
    else if (navigator.userAgent)
        iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

    let android = false;
    if (navigator.platform)
        android = /android/.test(navigator.platform);
    else if (navigator.userAgent)
        android = /android/.test(navigator.userAgent);

    //useBase64 = iOS;
    if (iOS || android) {
        window.open('cloud/api/file/retrieve?fileId=' + fileId + '&base64=-1&_access_token=' + this.utilsSvc.getToken(), '_blank');
    }
    else {
        $.ajax({
            type: "GET",
            headers: { 'Authorization': this.utilsSvc.getToken() },
            url: 'cloud/api/file/retrieve',
            data: {
                'fileId': fileId,
                'base64': useBase64 ? '1' : '0'
            }
            ,
            xhrFields: {
                responseType: 'blob'
            }
        }).fail(function (jqXHR, textStatus) {
            if (jqXHR.status === 501)
                alert('Please configure service url first.');
            else if (jqXHR.status === 404)
                alert('File not found');
            else
                alert('Retrieving file failed: ' + textStatus + " : " + jqXHR.responseText);
        }).done(function (data) {
            if (useBase64)
                window.open('data:' + that.utilsSvc.getMimeType(fileName) + ';base64, ' + data, '_blank');
            else {
                let blob = new Blob([data]);
                if (window.navigator && window.navigator.msSaveOrOpenBlob)
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                else {
                    let link = document.createElement('a');
                    link.target = '_blank';
                    link.href = window.URL.createObjectURL(blob);
                    link.setAttribute("download", fileName);
                    link.click();
                }
            }
        });
    }
}

0

312

Download File in Angular 2 (Download Pop-up not coming)

1 Respuestas

0

Encuentra empleos remotos

Andres GPT