如何从 angular2 RC5 中的 API 下载 PDF？答案

【问题标题】：How do you download a PDF from an API in angular2 RC5?如何从 angular2 RC5 中的 API 下载 PDF？
【发布时间】：2016-08-20 00:13:18
【问题描述】：

上一个问题有一些很好的解决方法：

Angular 2 download PDF from API and Display it in View

但是现在 RC5 出来了，我们可以使用 arrayBuffer()。我似乎对此无能为力。我如何从这个变成一个漂亮的 pdf blob：

return this._authHttp.get(this.fileUrl+id)
        .map((res:Response) => res.arrayBuffer())
        .subscribe(
            data => {
                console.log(data);
                var blob = new Blob([data], {type: 'application/pdf'});
                console.log(blob);
                saveAs(blob, "testData.pdf");

        },
            err => console.error(err),
        () => console.log('done')
    );

数据最终是我预期的两倍。有什么我想念的想法吗？

【问题讨论】：

标签： http pdf angular arraybuffer

【解决方案1】：

我在下载 pdf 文件时遇到了同样的问题。我浪费了两天时间来解决这个问题，但最终还是成功了。你需要将 responseType 设置为 blob。

return this._authHttp.get(this.fileUrl+id , 
                         { responseType: ResponseContentType.Blob })
    .map((res:Response) => res.blob())
    .subscribe(
        data => {
            console.log(data);
            var blob = new Blob([data], {type: 'application/pdf'});
            console.log(blob);
            saveAs(blob, "testData.pdf");

    },
        err => console.error(err),
    () => console.log('done')
);

别忘了导入 ResponseContentType

希望对你有帮助

【讨论】：

太棒了！！ responseType 做到了。我用 let blob = new Blob([response['_body']], { type: 'application/pdf' });
嗨，Kira，我正在尝试上面的解决方案，但我遇到了 saveAs 的问题。我收到错误 TS2304：找不到名称“saveAs”
@mayowaogundele 你需要包含github.com/eligrey/FileSaver.js
在这样做之后，我得到了一些错误。为此目的查看新的 SO 帖子 stackoverflow.com/questions/40782331/…
@mayowaogundele 你需要安装文件保护程序 npm 包

【解决方案2】：

谢谢大佬……

这个黑客，改变了我的生活......谢谢。但我做了一个轻微的改变。

        this._authHttp.get(URLx, { responseType: ResponseContentType.Blob })
        .map((res:any) => return res) <-- this line change --!>
        .subscribe( 
            data => {
                var mediaType = 'application/pdf';
                var blob = new Blob([data], {type: mediaType});
                var filename = `Veiculo-Eixos-${veiculoDTO.placa}.pdf`;
                // saveAs(blob, filename);
                var fileURL = URL.createObjectURL(blob);
                window.open(fileURL); // if you want to open it in new tab  
            },
            error =>{
                console.log(error);
            });

【讨论】：