Angular12中ArrayBuffer转Base64的高效方法（大文件优化）

核心优化思路：跳过低效的Base64转换，直接用Blob渲染 #

你的问题根源在于手动循环拼接字符串转Base64的方式效率极低——字符串是不可变类型，每次+=操作都会生成新字符串，大数据量下会触发频繁的垃圾回收，导致浏览器卡顿甚至超时。最优方案是直接利用浏览器原生API处理二进制数据，完全跳过Base64转换步骤。

方案1：直接请求Blob并生成URL渲染（推荐） #

Angular HttpClient支持直接将响应类型设为blob，拿到Blob后用URL.createObjectURL生成可直接访问的URL，无需任何转换即可渲染PDF。

步骤1：修改API请求方法，直接获取Blob #

getBlob(url: string, queryParams: HttpParams = new HttpParams()): Observable<Blob> {
  this.spinner.show();
  return this.http.get(`${environment.serverUrl}${url}`, {
    responseType: 'blob', // 直接请求Blob类型
    params: queryParams,
  })
  .pipe(
    map(this.handleGetResponse.bind(this)),
    catchError(this.handleError.bind(this))
  );
}

步骤2：渲染PDF #

拿到Blob后生成URL，可通过iframe、PDF组件（如ngx-extended-pdf-viewer）展示：

// 调用API并渲染
this.getBlob('/your-pdf-api').subscribe(blob => {
  const pdfUrl = URL.createObjectURL(blob);
  
  // 方式1：用iframe直接展示
  const iframe = document.createElement('iframe');
  iframe.src = pdfUrl;
  iframe.style.width = '100%';
  iframe.style.height = '100vh';
  document.body.appendChild(iframe);

  // 方式2：绑定到Angular模板（以ngx-extended-pdf-viewer为例）
  // this.pdfUrl = pdfUrl;

  // 组件销毁时记得释放URL，避免内存泄漏
  // ngOnDestroy() {
  //   URL.revokeObjectURL(this.pdfUrl);
  // }
});

方案2：必须转Base64时的高效转换方法 #

如果业务场景确实需要Base64格式，替换原有的循环拼接方式，改用String.fromCharCode.apply分块处理，大幅提升转换效率：

arrayBufferToBase64(buffer: ArrayBuffer): string {
  const bytes = new Uint8Array(buffer);
  const chunkSize = 0x8000; // 32KB分块，避免apply参数数量超限
  let binary = '';

  for (let i = 0; i < bytes.length; i += chunkSize) {
    const chunk = bytes.subarray(i, i + chunkSize);
    // 一次性生成块字符串，减少拼接次数
    binary += String.fromCharCode.apply(null, chunk as unknown as number[]);
  }

  return window.btoa(binary);
}

为什么这个方法更快？ #

• 避免了循环中频繁的字符串拼接操作，减少临时对象生成
• 利用apply一次性传递块内所有字节，原生方法处理效率远高于手动循环

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