Angular 5读取PDF流报错：从服务器获取PDF无法在新窗口打开

嗨，我来帮你搞定这个PDF打开的问题！你遇到的报错是因为Angular的HttpClient.get默认会把响应当作JSON来解析，但PDF是二进制数据，自然就解析失败啦。下面是具体的修复步骤：

1. 修改服务中的请求配置 #

你需要在get请求里指定响应类型为blob，这样Angular就会把服务器返回的PDF数据当作二进制大对象来处理，而不是强行解析成JSON。修改后的服务代码如下：

public openFile(path) { 
  let url='/download/'; 
  let pathFile= new HttpParams().set('pathFile', path); 
  // 指定responseType为blob，as 'json'是为了兼容TypeScript的类型检查
  return this.httpClient.get(url, {
    params: pathFile,
    responseType: 'blob' as 'json'
  });
}

2. 组件中处理Blob并打开PDF #

拿到Blob类型的PDF数据后，你需要创建一个临时的URL，然后用window.open在新窗口打开它，记得用完后释放这个URL避免内存泄漏：

this.creditPoliciesService.openFile(path).toPromise().then((blob: Blob) => {
  // 创建Blob的临时URL
  const pdfUrl = URL.createObjectURL(blob);
  // 在新窗口打开PDF
  window.open(pdfUrl, '_blank');
  // 监听窗口关闭后释放URL（可选但推荐，避免内存占用）
  setTimeout(() => {
    URL.revokeObjectURL(pdfUrl);
  }, 1000);
}).catch(error => {
  console.error('加载PDF失败:', error);
});

额外提示 #

如果你的服务器端可以配置响应头，最好把Content-Type设置为application/pdf，这样浏览器能更准确地识别文件类型，打开体验会更顺畅。

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