在Angular 5应用中渲染PDF

dave0688

我正在尝试在Angular 5应用中渲染PDF。基本上,我正在发送GET请求以获取文件流(无链接!在我们的方案中,通过合规性是不可能的)。文件流自带Content-Type: application/pdf

现在我有两个问题:

首先,响应从服务器返回200(可以,但是它总是在我的角度应用程序中报告错误:

提取PDF的方法如下所示:

  fetchPdfAjaxRequest(caseId: string) {
    this.caseListService.getPdfFileStream(caseId)
                        .takeUntil(this.ngUnsubscribe)
                        .subscribe( (res) => {
                          console.log(res);
                        },
                        (error) => {
                          this.errorService.displayError(error.status, error.statusText);
                        });
  }

我的服务方法如下:

public getPdfFileStream(caseId: string) {
    const url = this.CASE_API_URL + '/' + caseId + '/pdf';
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');

    return this.httpClient.get(url, {headers: headers});
  }

但是,即使响应为200,它也会进入错误分支。可能是因为我需要在请求中设置一些其他标头吗?

响应主体只是一个巨大的字符串:

// just an excerpt from the "response" tab in Chrome dev tools
JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/KQovQ3JlYXRvciAo/v8AdwB

现在,我需要解析该字符串并将其呈现为PDF。

有谁知道...-为什么响应显示服务器上有200,但进入Angular的错误分支?-如何将巨大的字符串(blob)呈现为PDF?我虽然是这个库(https://vadimdez.github.io/ng2-pdf-viewer/)。作为src属性,它可以采用URL或Uint8Array(可能类似于字符串?)。

任何帮助是极大的赞赏 :)

@UPDATE:

@Zlatko已回答第一个问题(不获取文件流)的解决方案。

现在,关于如何渲染PDF,我找到了另一篇文章,并提出了以下解决方案:

let file = new Blob([pdf], { type: 'application/pdf' });            
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
蜜糖

HttpClient的默认responseType为'json'。告诉angular期望二进制:

return this.httpClient.get(url, { headers: headers, responseType: 'blob' });

看看HttpClient文档。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Angular 5中渲染视图之前等待数据

来自分类Dev

如何在Angular中测试渲染速度

来自分类Dev

更新DOM与在Angular中渲染视图

来自分类Dev

Angular 2模板中的渲染代码

来自分类Dev

在App Engine上使用Angular Universal进行服务器渲染的Angular 5应用

来自分类Dev

ionic3和angular 5中的动态标签渲染

来自分类Dev

clearInterval()在Angular 5应用中不起作用

来自分类Dev

无法解析角度5 aspnet预渲染中的node_modules \ @angular \ platform-server \ bundles中的@ angular / http

来自分类Dev

在Angular模板中渲染Observable对象属性

来自分类Dev

在Angular 5中使用ng2-pdf-viewer导航和滚动PDF文件

来自分类Dev

在Angular 6中应用DomSanitizationService

来自分类Dev

Angular-在同级组件中渲染模板

来自分类Dev

在Angular中渲染组件实例?

来自分类Dev

Angular ngrx:在模板中渲染对象的问题

来自分类Dev

在Angular中渲染结果后应用jquery

来自分类Dev

Angular应用中的Skeuocard

来自分类Dev

教程中的Angular JS无法渲染

来自分类Dev

在Angular2应用程序中渲染JSON对象将导致“对象对象”

来自分类Dev

离子应用程序中不使用templateUrl渲染Angular指令

来自分类Dev

Angular 中的 ngClass 未应用

来自分类Dev

如何在 Angular 5 中渲染 PDF?

来自分类Dev

Angular 5 中的分页

来自分类Dev

在 Angular 模板中应用类

来自分类Dev

Angular 5 无需渲染即可生成 HTML

来自分类Dev

如何在 Angular 中优化渲染?

来自分类Dev

将带有 rxjs 的 angular 5 模块导入到 angular 8 应用程序中

来自分类Dev

如何在 Angular 应用程序渲染中将对象作为 StoryBook 中的故事传递给 @Input

来自分类Dev

Angular 应用程序中的 Bootstrap 5

来自分类Dev

在 Angular 中渲染对象的对象

Related 相关文章

热门标签

归档