来自REST API的PDF未加载到Angular 2应用程序中

Question

为了让Angular 2 / 4应用程序成功地将一个PDF文件从RESTful http调用加载到web浏览器中，需要对下面的内容做哪些具体的更改？

请注意，有问题的应用程序扩展了超文本传输协议以向超文本传输协议请求添加JWT。根据此链接，以这种方式扩展超文本传输协议将导致与覆盖Request estOptions相关的问题。

当用户在web浏览器中键入< code > http://192 . 168 . 1 . 5:4000/white paper . PDF 时，后端API会成功提供所需的PDF。然而，Angular应用程序需要从API编程中吸收白皮书，然后在浏览器中提供pdf，其中包含Angular应用程序的一部分url。

Angular应用程序的代码如下：

我的服务

getAll() {
    console.log('Inside getAll!');
    return this.http.get('http://192.168.1.5:4000/whitepaper.pdf').map((response: Response) => response.blob())
            .catch((err:Response) => {
        console.log('Error block!');
        return Observable.throw('error!');
     });;
}  

my.component.ts

getPDF() {
    console.log('Hey there, Jackass!');
    console.log(JSON.parse(localStorage.getItem('currentUser')).token);
    let myblob = new Blob([this.pDFService.getAll()], { type: 'application/pdf' });
    console.log(myblob.type);
    console.log(myblob.size);
    var fileURL = URL.createObjectURL(myblob);
    window.open(fileURL); // if you want to open it in new tab
}  

myblob。键入打印为application/pdf，以及myblob。尺寸打印为15。

后端API在Node.js/Express.

Angular 代码示例来自此答案，但在当前情况下不起作用。

自定义http的代码。ts位于此链接。该链接提到，在当前应用程序中覆盖http时，在当前情况下会出现问题。

Answer 1

您的< code>getAll()将向您返回一个< code >可观察值。因此:

    this.pDFService.getAll().subscribe( data => {
        let myblob = new Blob([data], { type: 'application/pdf' });
        var fileURL = URL.createObjectURL(myblob);
        window.open(fileURL); // if you want to open it in new tab
    })