Question

我有以下服务，允许我使用http Get

下载文件

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { saveAs } from 'file-saver';

@Injectable()
export class FileService {

  blob: Blob;
  url: string;

  constructor(private _http: Http) { }

  uploadFile(file: File, filetype: string) {
    console.log('uploading...');
    const endpoint = 'http://localhost:60994/api/file';
    const formData:  FormData = new FormData();
    formData.append(filetype, file, file.name);
    return this._http.post(endpoint, formData);
  }

  getFile() {
    return this._http.get('http://localhost:60994/api/file')
    .subscribe(data => {
      if (data != null)
      {
        this.blob = new Blob([data._body], { type: 'application/vnd.ms-excel' });
        const file = new File([this.blob], 'report.xlsx', { type: 'application/vnd.ms-excel' });
        console.log(this.blob);
        console.log(file);
        this.url = window.URL.createObjectURL(file);
        window.open(this.url);
      }
    });
  }
}

下载时的文件（xlsx，xls）大部分都是损坏的，没有数据（服务器发送的文件有数据，我自己检查过）。还有，

console.log(this.blob);

和

console.log(file);

显示文件大小与服务器预期的文件大小完全相同（在Chrome的控制台中）。

我最好的猜测是，我在重建收到的文件方面出错了。

Answer 1

你的http GET请求很可能想要一些选项来表示你对原始响应字节感兴趣：

this._http.get(url, {responseType: 'blob'}).subscribe(..)

我不确定调用的'TRIAL_PRICE'参数当前是什么，但这肯定不是angular5 HTTP客户端所期望的参数：

https://angular.io/api/common/http/HttpClient#get

通过调用responseType设置为blob，您还将获得Blob对象作为Observable有效负载，因此您也不需要身体转换逻辑。

Answer 2

原来我使用错误的导入（Http）进行HTTP GET。

已导入import { HttpClient } from '@angular/common/http';并已更改

 getFile() {
        return this._http.get('http://localhost:60994/api/file',{responseType: 'blob'})
        .subscribe(data => saveAs(data));
      }

在角度客户端（角度v5.2）中下载excel文件作为WebAPI的响应而接收

2 个答案: