下面的代码适用于我

让HTML像这样:

<button type="button" onclick="startDownload(someData)">Click to download!</button>

JS如下:

let someData = {};
someData.name = 'someName';
someData.fileurl= 'someUrl';

function startDownload(someData){
    let link = document.createElement('a');
    link.href = someData.fileurl; //data is object received as response
    link.download = someData.fileurl.substr(someData.fileurl.lastIndexOf('/') + 1);
    link.click();
}

对于较新的angular版本:

npm install file-saver --save
npm install @types/file-saver --save


import {saveAs} from 'file-saver';

this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
  .subscribe(blob => {
    saveAs(blob, 'download.pdf');
  });

我找到了一个从angular 2下载而不会损坏的解决方案， 使用spring MVC和angular 2

我的返回类型是:- responseentity从java结束。这里我发送字节[]数组从控制器返回类型。

第二步-在你的工作空间中包含文件保存器-在索引页中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

第3 - at组件ts编写以下代码:

import {ResponseContentType} from '@angular.core';

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
        let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
            this.http
            .post('/project/test/export',
                    somevalue,options)
              .subscribe(data => {

                  var mediaType = 'application/vnd.ms-excel';
                  let blob: Blob = data.blob();
                    window['saveAs'](blob, 'sample.xls');

                });

这将为您提供xls文件格式。如果需要其他格式，请使用正确的扩展名更改介质类型和文件名。

对于那些使用Redux模式

我在文件保存器中添加了@Hector Cuevas的名字，在他的回答中。使用Angular2 v. 2.3.1，我不需要添加@types/file-saver。

以PDF格式下载日志为例。

日记账操作

public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS,
   payload: { referenceId: referenceId }
 };
}

public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
   payload: { blob: blob }
 };
}

期刊效应

@Effect() download$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS)
    .switchMap(({payload}) =>
        this._journalApiService.downloadJournal(payload.referenceId)
        .map((blob) => this._actions.downloadJournalsSuccess(blob))
        .catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
    );

@Effect() downloadJournalSuccess$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
    .map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))

期刊服务

public downloadJournal(referenceId: string): Observable<any> {
    const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
    return this._http.getBlob(url);
}

HTTP服务

public getBlob = (url: string): Observable<any> => {
    return this.request({
        method: RequestMethod.Get,
        url: url,
        responseType: ResponseContentType.Blob
    });
};

轴颈减速器 虽然这只设置了我们应用程序中使用的正确状态，但我仍然想添加它来显示完整的模式。

case JournalActions.DOWNLOAD_JOURNALS: {
  return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}

case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
  return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}

我希望这对你有帮助。

问题是可观察对象运行在另一个上下文中，所以当你尝试创建URL var时，你有一个空对象，而不是你想要的blob。

解决这个问题的众多方法之一如下:

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

当请求准备好时，它将调用函数"downloadFile"，定义如下:

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

这个blob已经被完美地创建了，所以URL变量，如果没有打开新的窗口，请检查你已经导入'rxjs/Rx';

import 'rxjs/Rx' ;

我希望这能帮助到你。

这是为那些寻找如何使用HttpClient和文件保存器的人准备的:

点击安装

NPM安装文件保护程序 NPM install @types/file-saver

API服务类:

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

组件:

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}