Question

服务器端（Visual Studio 2015）

我在服务器端存储了一个pdf文件。当通过WebApi从客户端调用时，我使用以下指令读取并将内容存储在变量中：

byte[] bytes = File.ReadAllBytes(path);

然后我按照以下说明将文件内容发送给客户端：

return Request.CreateResponse(HttpStatusCode.OK, bytes);

客户端（Angular 7） 安装FileSaver后，我收到文件内容，看起来像这样

JVBERi0xLjUNCiW1tbW1DQoxIDAgb2Jq ... eXBlL0NhdGFsb2cvUG

然后我尝试通过以下方式下载它：

this.fileService.fileDownload().subscribe(bytes => {
    const file = new Blob([bytes], {type: 'application/pdf'});
    saveAs(file, 'file.pdf');
}

在fileService中使用以下方法调用服务器API：

fileDownload(id): Observable<HttpResponse<any>>{
    const httpOptions = {
      'responseType'  : 'arraybuffer' as 'json'
    };
    return this.http.get<any>('http://localhost:55820/api/files/12',httpOptions);
  }

但是该文件已损坏或未被Acrobat Reader接受。

我还希望它适用于其他文件类型，文件内容在byte[]中，内容类型定义（文本/纯文本，应用程序/ pdf），并带有扩展名。我怎样才能证明这个过程呢？

Answer 1

httpOptions 应该为{ responseType: 'blob' }

尝试这样：

fileDownload(id): Observable<HttpResponse<any>>{
    return this.http.get('http://localhost:55820/api/files/12',{ responseType: 'blob' });
}



this.fileService.fileDownload().subscribe(bytes => {
    saveAs(file, 'file.pdf');
}

Answer 2

Response Type应该类似于responseType：'blob'，并且从可观察到的Blob响应之后，您可以在downloadFile（content）函数中传递Blob响应，我们将提供文件和名称的类型（例如pdf，zip等）文件并创建要下载的事件。

download(id): Observable<Blob> {
    return this.http.get(this.downloadUrl + id 
    { 
        headers: this.getHeaders(), responseType: 'blob' })
        .pipe(catchError(this.handleError<any>('download')));
    }

this.downloadService.download(id).subscribe(data => {
    this.downloadFile(data);
});

downloadFile(content) {
    const fileName = 'dowmloadfile.pdf';
    const type = 'pdf';
    const e = document.createEvent('MouseEvents');
    const a = document.createElement('a');
    a.download = fileName;
    a.href = window.URL.createObjectURL(content);
    a.dataset.downloadurl = [type, a.download, a.href].join(':');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

从字节下载PDF []

2 个答案: