Angular5加载PDF文档失败求助：从Web API获取并展示PDF报错

看起来你在从Web API获取PDF并在Angular应用中展示时遇到了「Failed to load PDF document」的错误，结合你给出的download_pdf方法代码，我整理了几个最可能的问题点和对应的解决办法：

1. 响应类型设置过时 #

你代码里用的ResponseContentType.ArrayBuffer在Angular 4.3+之后就被弃用了，官方推荐直接使用字符串类型的responseType: 'arraybuffer'。旧的枚举类型可能导致HTTP响应解析异常，让浏览器无法正确识别二进制PDF数据。

修正后的service代码：

import { HttpHeaders, HttpParams } from '@angular/common/http';

public download_pdf(id: string): Observable<ArrayBuffer> {
  // 构建请求头，携带token
  const headers = new HttpHeaders()
    .append('x-access-token', this.auth.getCurrentUser().token);
  
  // 这里建议把id作为查询参数传递（更符合REST规范）
  const params = new HttpParams().set('id', id);

  return this.http.get(Api.getUrl(Api.URLS.download_pdf), {
    headers: headers,
    params: params,
    // 类型断言解决Angular类型检查的问题
    responseType: 'arraybuffer' as 'json'
  });
}

2. 后端API的Content-Type不正确 #

浏览器能否正确识别PDF，很大程度依赖后端返回的Content-Type响应头。请打开Chrome开发者工具的「Network」标签，找到你的PDF请求，查看Response Headers里的Content-Type是否为application/pdf。

如果后端没设置这个头，或者设置成了application/octet-stream这类通用二进制类型，需要后端调整响应配置，明确返回Content-Type: application/pdf。

3. 前端Blob转换有误 #

拿到API返回的ArrayBuffer后，需要正确转换成Blob对象再生成URL供PDF查看组件（比如iframe、PDF.js）使用。如果转换时type设置错误，也会导致PDF加载失败。

组件中的处理示例：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

// 注入DomSanitizer以避免安全警告
constructor(private pdfService: PdfService, private sanitizer: DomSanitizer) {}

loadPdf(id: string) {
  this.pdfService.download_pdf(id).subscribe({
    next: (pdfBuffer) => {
      // 用ArrayBuffer创建Blob，指定类型为application/pdf
      const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' });
      // 生成安全的URL（如果用iframe展示，建议用sanitize处理）
      const pdfUrl = window.URL.createObjectURL(pdfBlob);
      this.safePdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(pdfUrl);
      // 比如赋值给iframe的src: <iframe [src]="safePdfUrl"></iframe>
    },
    error: (err) => {
      console.error('PDF加载失败:', err);
      // 可以在这里提示用户错误信息
    }
  });
}

4. ID传递方式不符合后端预期 #

你原来的代码把id放在了请求头里，这不是常规的做法（通常ID会作为URL路径参数或查询参数传递）。如果后端是从URL参数/查询参数中获取ID，那么你当前的写法会导致后端无法拿到ID，返回空数据或错误响应，自然PDF加载失败。

建议按照我在第一点里的代码，把ID作为查询参数传递；如果后端期望ID在URL路径里（比如/api/pdf/{id}），则需要调整API的URL拼接逻辑：

// 假设Api.URLS.download_pdf是'/api/pdf'，拼接成'/api/pdf/your-id'
return this.http.get(`${Api.getUrl(Api.URLS.download_pdf)}/${id}`, {
  headers: headers,
  responseType: 'arraybuffer' as 'json'
});

5. 权限或跨域问题 #

虽然你携带了x-access-token，但还是要确认token是否有效、是否有权限访问该PDF资源。可以查看Network请求的状态码：

• 如果是401/403：说明token无效或权限不足，需要检查token的生成和传递逻辑。
• 如果是CORS相关错误：需要后端配置跨域允许的请求头（比如x-access-token）和响应类型。

内容的提问来源于stack exchange，提问作者OnnaB