Angular 2从API下载PDF并在View中显示

发布时间：2020-12-17 08:02:12 所属栏目：安全来源：网络整理

导读：我正在学习Angular 2 Beta。我想知道如何从API下载PDF文件并在我的视图中显示它？我试图使用以下内容提出请求： var headers = new Headers(); headers.append('Accept','application/pdf'); var options = new ResponSEOptions({ headers: headers }); var

我正在学习Angular 2 Beta。我想知道如何从API下载PDF文件并在我的视图中显示它？我试图使用以下内容提出请求：

var headers = new Headers();
    headers.append('Accept','application/pdf');
    var options = new ResponSEOptions({
        headers: headers
    });
    var response = new Response(options);
    this.http.get(this.setUrl(endpoint),response).map(res => res.arrayBuffer()).subscribe(r=>{
       console.log(r);
    })

>请注意，我只使用console.log来查看r的值

但我总是收到以下异常消息：

“arrayBuffer()” method not implemented on Response superclass

是因为Angular 2 Beta中尚未准备好该方法吗？或者我犯了什么错误？

任何帮助，将不胜感激。非常感谢你。

实际上，HTTP支持尚未实现此功能。

作为一种变通方法，您需要扩展Angular2的BrowserXhr类，如下所述，将responseType设置为基础xhr对象上的blob：

import {Injectable} from 'angular2/core';
import {BrowserXhr} from 'angular2/http';

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.responseType = "blob";
    return <any>(xhr);
  }
}

然后，您需要将响应有效内容包装到Blob对象中，并使用FileSaver库打开下载对话框：

downloadFile() {
  this.http.get(
    'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe(
      (response) => {
        var mediaType = 'application/pdf';
        var blob = new Blob([response._body],{type: mediaType});
        var filename = 'test.pdf';
        saveAs(blob,filename);
      });
}

FileSaver库必须包含在HTML文件中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

看到这个plunkr：http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

不幸的是，这将为所有AJAX请求设置responseType。为了能够设置此属性的值，XHRConnection和Http类中还有更多要做的更新。

作为参考，请看这些链接：

> Download pdf file using jquery ajax
> Receive zip file,angularJs

编辑

在考虑了一点之后，我认为您可以利用分层注入器并仅在执行下载的组件级别配置此提供程序：

@Component({
  selector: 'download',template: '<div (click)="downloadFile() ">Download</div>',providers: [
    provide(CustomBrowserXhr,{ useClass: CustomBrowserXhr }
  ]
})
export class DownloadComponent {
  @Input()
  filename:string;

  constructor(private http:Http) {
  }

  downloadFile() {
    this.http.get(
      'https://mapapi.apispark.net/v1/images/'+this.filename).subscribe(
        (response) => {
          var mediaType = 'application/pdf';
          var blob = new Blob([response._body],{type: mediaType});
          var filename = 'test.pdf';
          saveAs(blob,filename);
        });
    }
}

此覆盖仅适用于此组件(在引导应用程序时不要忘记删除相应的提供)。下载组件可以像这样使用：

@Component({
  selector: 'somecomponent',template: `
    <download filename="'Granizo.pdf'"></download>
  `,directives: [ DownloadComponent ]
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!