Скачать файл в Angular 2 (всплывающее окно загрузки не появляется)

У меня есть кнопка просмотра, и при нажатии я вызываю веб-API для загрузки файла документа Word.

WebAPI работает нормально, когда я вставляю URL-адрес загрузки в браузер (например, http://localhost:50963/api/Download/1022), в браузере отображается всплывающее окно для сохранения/отмены. введите здесь описание изображения

Я хотел иметь такое же поведение, т.е. когда пользователь нажимает кнопку «Просмотр», мне нужно показать выше всплывающее окно загрузки. API вызывается успешно, см. скриншот ниже введите здесь описание изображения

скачать.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())
  }
}

список-документов.component.ts

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

download file angular angular-ui-router steam-web-api
person Tanmay    schedule 27.04.2017    source источник
comment
Это работает таким образом. потому что, когда вы загружаете с вашего сайта по нажатию кнопки. родительское окно или вкладка не затрагиваются.   -  person Aravind    schedule 27.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно сделать некоторые обходные пути здесь. Служба Angular «http» не может дать то, что вы хотите. Я вставил сюда весь свой рабочий код. Вам нужно выбрать ту часть, которая вам нужна.

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();
                }
            }
        });
    }
}
person wannadream    schedule 27.04.2017
comment
Спасибо... Я добавил код window.open(downloadUrl) по клику, и я могу загрузить файл... но единственное, что окно обновляется :( - person Tanmay; 27.04.2017
comment
Позвольте мне вас, если вы используете кнопку или гиперссылку. Если это кнопка, измените тип «отправить» на «кнопку». - person wannadream; 27.04.2017
comment
Я использую гиперссылку - ‹a (щелчок)=СкачатьСтатью(документ)›Просмотр‹/a› - person Tanmay; 28.04.2017