Question

我有一个视图按钮，点击后我调用Web API下载word文档文件。

WebAPI工作正常，当我将下载URL粘贴到浏览器中时（例如http://localhost:50963/api/Download/1022），浏览器显示一个弹出窗口以保存/取消。

我想要有相同的行为，即当用户点击“查看”按钮时，我需要显示以上下载弹出窗口。 API已成功调用，请参见下面的屏幕截图

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())
  }
}

文档list.component.ts

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

Answer 1

你需要在这里做一些解决方法。 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();
                }
            }
        });
    }
}

下载Angular 2中的文件（下载弹出窗口未来）

1 个答案: