FileSaver 和 Angular2 - 在获取请求时找不到文件

Question

我正在尝试让 FileSaver 为我的 Angular2 项目工作，并尝试解决其他问题的答案，但似乎仍然找不到它。

在我的服务中：

@Injectable()
export class DownloadsService {
    http: any;
    private actionUrl: string;
    //constructor(private _http: Http) {
    constructor(private jsonp: Jsonp, private _http: Http) {
        let hostname = document.location.hostname;
        console.log(hostname);
        if (hostname === 'localhost') {
            this.actionUrl = '/src/assets/rr/spreadsheets/';
        } else {
            this.actionUrl = '';
        }
    }

    downloadBlaBlasCSV() {
        let options = { responseType: ResponseContentType.ArrayBuffer };
        console.log(this.actionUrl + 'event_template_2.xlsx');
        return this.http
            .get(this.actionUrl + 'event_template_2.xlsx', options)
        .map((res: Response) => res['_body'])
        .catch((err: Response) => Observable.throw(err.json()));
    }

}

在我的组件中：

import { saveAs } from 'file-saver';

    downloadBlaBlasCSV() {
        this._downloadsService.downloadBlaBlasCSV().subscribe(
          (data) => { this.openFileForDownload(data); },
          (error: any) => {});
      }

    openFileForDownload(data: Response) {
        var blob = new Blob([data], { type: 'text/xlsx;charset=utf-8' });
        saveAs(blob, 'player_template.xlsx');
      }

在我的 html:

<button class="btn btn-primary" (click)="downloadBlaBlasCSV()">Download Spreadsheet Template</button>

我收到此错误：

ERROR TypeError: Cannot read property 'get' of undefined
    at DownloadsService.webpackJsonp.../../../../../src/app/services/downloads.service.ts.DownloadsService.downloadBlaBlasCSV (downloads.service.ts:32)
    at PlayersComponent.webpackJsonp.../../../../../src/app/players/players.component.ts.PlayersComponent.downloadBlaBlasCSV (players.component.ts:27)
    at Object.eval [as handleEvent] (PlayersComponent.html:37)
    at handleEvent (core.es5.js:11995)
    at callWithDebugContext (core.es5.js:13456)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13044)
    at dispatchEvent (core.es5.js:8599)
    at core.es5.js:9210
    at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2651)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)

我不知道我是不是没有为资产文件夹创建正确的 URL 还是什么，但我已经尝试了很多次迭代，但仍然遇到相同的错误。任何帮助将非常感激。谢谢。

Answer 1

问题可能不在 FileSaver 中。您正在写：

private _http: Http

但是你使用的是没有_:

this.http should be this._http

Answer 2

你能改变 downloadBlaBlasCSV 方法吗

downloadBlaBlasCSV()
 {     
   let headers = new Headers();
   headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token'));
  return this._http.get(url,{  headers: headers,responseType: ResponseContentType.Blob }).map(
    (res) => {
        return new Blob([res.blob()], { type: 'application/vnd.ms-excel' })
    })
  }

也参考这个post

FileSaver 和 Angular2 - 在获取请求时找不到文件

FileSaver and Angular2 - not finding file on get request

filesaver.js

angular