Angular从后端字符串转Blob下载PDF出现空白页问题排查

云原生阿岚

2026-8-16

问题根源及解决方案

核心错误

你把后端返回的PDF二进制数据当成字符串接收并处理，导致原始字节流被破坏，生成的Blob不是有效的PDF文件，所以打开后显示空白。

PDF是二进制格式文件，后端返回的是字节序列，而字符串基于UTF-8编码，当你把二进制数据转成字符串时，很多无法被UTF-8正确解析的字节会被替换成乱码（比如你看到的çÇßsNö这类字符），彻底损坏了PDF的结构。

修正步骤

1. 正确接收后端的二进制数据

在Angular的HTTP请求中，必须明确告诉HttpClient接收二进制类型的数据，而非默认的字符串或JSON。

如果用HttpClient.get请求PDF：

import { HttpClient } from '@angular/common/http';

// 注入HttpClient后发起请求
this.http.get('/your-api-path', { responseType: 'blob' }).subscribe((pdfBlob: Blob) => {
  // 直接保存Blob对象，不要转成字符串
  this.pdfBlob = pdfBlob;
});

如果需要用ArrayBuffer接收（后续也能转成Blob）：

this.http.get('/your-api-path', { responseType: 'arraybuffer' }).subscribe((buffer: ArrayBuffer) => {
  this.pdfBuffer = buffer;
});

2. 修改下载函数

基于正确的二进制数据生成Blob并下载：

如果保存的是Blob对象：

download() {
  const fileURL = window.URL.createObjectURL(this.pdfBlob);
  window.open(fileURL);
  // 释放URL对象，避免内存泄漏
  setTimeout(() => {
    window.URL.revokeObjectURL(fileURL);
  }, 1000);
}

如果保存的是ArrayBuffer：

download() {
  const blob = new Blob([this.pdfBuffer], { type: 'application/pdf' });
  const fileURL = window.URL.createObjectURL(blob);
  window.open(fileURL);
  setTimeout(() => {
    window.URL.revokeObjectURL(fileURL);
  }, 1000);
}