大佬教程收集整理的这篇文章主要介绍了Angular 2从API下载PDF并在View中显示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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的值
但我总是收到以下异常消息：
是因为Angular 2 Beta中尚未准备好该方法吗？或者我犯了什么错误？
任何帮助，将不胜感激。非常感谢你。
作为一种变通方法，您需要扩展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 ]
})
以上是大佬教程为你收集整理的Angular 2从API下载PDF并在View中显示全部内容，希望文章能够帮你解决Angular 2从API下载PDF并在View中显示所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。