Angular前端如何打开或加载原始PDF字符串文件？

方案一：转换为Blob并生成Object URL适配ng2-pdf-viewer #

ng2-pdf-viewer支持Blob或Object URL作为src输入，只需将原始PDF字符串转换为Blob后生成临时URL即可：

1. 将PDF字符串编码为Uint8Array（处理二进制字符）
2. 基于Uint8Array创建PDF类型的Blob
3. 生成Object URL传给组件
4. 组件销毁时释放URL避免内存泄漏

代码示例：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-pdf-viewer-wrapper',
  template: `<pdf-viewer [src]="pdfUrl" [show-all]="true" *ngIf="pdfUrl"></pdf-viewer>`
})
export class PdfViewerWrapperComponent implements OnInit, OnDestroy {
  pdfString: string = '%PDF-1.7\n%�І�\n1 0 obj\n<<SubFilter/adbe.pkcs7.'; // 你的原始PDF字符串
  pdfUrl: string | null = null;

  ngOnInit(): void {
    // 编码字符串为二进制数组
    const encoder = new TextEncoder();
    const pdfBytes = encoder.encode(this.pdfString);
    // 创建PDF Blob
    const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
    // 生成临时访问URL
    this.pdfUrl = URL.createObjectURL(pdfBlob);
  }

  ngOnDestroy(): void {
    // 释放URL资源
    if (this.pdfUrl) {
      URL.revokeObjectURL(this.pdfUrl);
    }
  }
}

方案二：直接使用pdfjs-dist渲染ArrayBuffer #

若无需依赖ng2-pdf-viewer，可直接用pdfjs-dist的API加载二进制数据并渲染到Canvas：

1. 将PDF字符串转换为ArrayBuffer
2. 用pdfjsLib.getDocument加载该Buffer
3. 获取PDF页面并渲染到Canvas元素

代码示例：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
// 引入PDF Worker
import 'pdfjs-dist/build/pdf.worker.entry';

@Component({
  selector: 'app-pdf-renderer',
  template: `<canvas #pdfCanvas style="border: 1px solid #ccc;"></canvas>`
})
export class PdfRendererComponent implements OnInit {
  @ViewChild('pdfCanvas') pdfCanvas!: ElementRef<HTMLCanvasElement>;
  pdfString: string = '%PDF-1.7\n%�І�\n1 0 obj\n<<SubFilter/adbe.pkcs7.';

  ngOnInit(): void {
    this.renderPdf();
  }

  async renderPdf(): Promise<void> {
    // 转换字符串为ArrayBuffer
    const encoder = new TextEncoder();
    const pdfBuffer = encoder.encode(this.pdfString).buffer;

    // 加载PDF文档
    const pdfDoc = await pdfjsLib.getDocument({ data: pdfBuffer }).promise;
    // 获取第一页
    const page = await pdfDoc.getPage(1);

    // 设置渲染视口与Canvas尺寸
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = this.pdfCanvas.nativeElement;
    const ctx = canvas.getContext('2d')!;
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染页面到Canvas
    await page.render({
      canvasContext: ctx,
      viewport: viewport
    }).promise;
  }
}

注意事项 #

• 确保你的PDF字符串是完整的PDF文件内容，截断的内容无法正常解析渲染
• TextEncoder是浏览器原生API，若需兼容旧浏览器需引入对应的polyfill
• 使用Object URL时必须在组件销毁时调用URL.revokeObjectURL，防止内存泄漏

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