Angular中使用ng2-pdf-viewer展示PDF报错求助

你的核心问题在于HTTP请求未正确指定响应类型，默认情况下Angular的HttpClient会将响应解析为JSON，导致PDF二进制数据被损坏；另外多余的FileReader转换步骤也可能引入不必要的问题。以下是具体修复步骤：

1. 修正API调用，指定响应类型 #

在POST请求中必须明确告知HttpClient返回的是二进制数据，否则默认的JSON解析会破坏PDF内容：

downloadFileMock() {
  let formData = new FormData();
  formData.append('fileName', "artghh.pdf");
  // 移除无效的Access-Control-Allow-Origin请求头（这是服务器响应头，无需在请求中设置）
  return this.http.post(this.baseURL + '/downloadMock', formData, {
    responseType: 'blob' // 关键：指定响应类型为Blob
  });
}

2. 简化displayFile函数，直接使用Blob作为数据源 #

ng2-pdf-viewer本身支持直接接收Blob对象，无需转成Uint8Array或通过FileReader处理，简化代码避免错误：

displayFile() {
  this.backendService.downloadFileMock().subscribe((retFileData: Blob) => {
    this.pdfSrc = retFileData; // 直接将Blob赋值给pdfSrc
    this.displayOverlay(this.pdfEle);
  }, error => {
    // 新增错误处理，方便排查请求问题
    console.error('PDF下载失败:', error);
  });
}

3. 确认ViewChild引用正确 #

确保组件类中正确获取了模板中pdf容器的引用：

import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('pdf') pdfEle!: ElementRef; // 模板中的#pdf需与这里的变量名对应

4. 可选：直接使用ArrayBuffer（若有需求） #

如果坚持要用Uint8Array，可直接指定responseType为arraybuffer，跳过Blob转换：

// API调用修改
downloadFileMock() {
  let formData = new FormData();
  formData.append('fileName', "artghh.pdf");
  return this.http.post(this.baseURL + '/downloadMock', formData, {
    responseType: 'arraybuffer'
  });
}

// displayFile修改
displayFile() {
  this.backendService.downloadFileMock().subscribe((retFileData: ArrayBuffer) => {
    this.pdfSrc = new Uint8Array(retFileData);
    this.displayOverlay(this.pdfEle);
  });
}

原代码报错原因 #

• 未指定responseType时，HttpClient会将二进制PDF数据当成JSON解析，导致数据损坏，生成的Blob无效。
• 多余的FileReader转换步骤不仅没必要，还可能引发异步时序问题（比如弹窗显示时pdfSrc尚未完成赋值）。

按以上步骤修改后，即可正常加载PDF文件。若仍有问题，可检查控制台具体错误信息，比如是否存在跨域问题、API返回的Content-Type是否为application/pdf。

内容的提问来源于stack exchange，提问作者H-Bar