Angular前端如何提取PDF文本并将信息存入对象/变量

核心思路 #

通过前端解析PDF提取文本，再根据目标文档的格式规则，将文本转化为结构化数据（如对象）后展示，无需呈现完整PDF文件。

步骤实现 #

1. 安装依赖

使用pdfjs-dist库处理PDF解析，执行安装命令：

npm install pdfjs-dist @types/pdfjs-dist

2. 编写文件上传组件

在组件模板中添加PDF专属上传控件，搭配信息展示区域：

<input type="file" accept=".pdf" (change)="handleFileUpload($event)">
<div *ngIf="extractedData" class="info-container">
  <h3>提取到的信息</h3>
  <p><strong>姓名：</strong>{{ extractedData.name }}</p>
  <p><strong>地址：</strong>{{ extractedData.address }}</p>
  <!-- 按需添加其他字段展示 -->
</div>

3. 实现PDF文本提取与结构化解析

在组件类中编写完整处理逻辑：

import { Component } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import { getDocument } from 'pdfjs-dist';

// 配置PDF Worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

@Component({
  selector: 'app-pdf-extractor',
  templateUrl: './pdf-extractor.component.html',
  styleUrls: ['./pdf-extractor.component.css']
})
export class PdfExtractorComponent {
  extractedData: any;

  async handleFileUpload(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file || file.type !== 'application/pdf') return;

    const fileReader = new FileReader();
    fileReader.onload = async () => {
      const arrayBuffer = fileReader.result as ArrayBuffer;
      const pdf = await getDocument({ data: arrayBuffer }).promise;
      let fullText = '';

      // 逐页读取并拼接PDF文本
      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i);
        const textContent = await page.getTextContent();
        fullText += textContent.items.map(item => (item as any).str).join(' ');
      }

      // 将纯文本解析为结构化数据
      this.extractedData = this.parseTargetData(fullText);
    };

    fileReader.readAsArrayBuffer(file);
  }

  // 针对目标PDF格式编写解析规则（示例为身份证类文档）
  parseTargetData(text: string) {
    const result: any = {};
    
    // 匹配姓名（需根据实际文本排版调整正则）
    const nameMatch = text.match(/Nombre:\s*(.+?)\s+/);
    if (nameMatch) result.name = nameMatch[1];

    // 匹配地址（同理调整正则适配实际格式）
    const addressMatch = text.match(/Dirección:\s*(.+?)\s+/);
    if (addressMatch) result.address = addressMatch[1];

    // 按需添加身份证号、出生日期等字段的正则匹配
    return result;
  }
}

4. 关键注意点

• 正则表达式需完全匹配目标PDF的文本排版，不同格式的PDF要对应调整匹配规则
• 若上传的是扫描版PDF（图片格式），前端无法直接提取文本，需结合OCR工具（如Tesseract.js）处理
• 大文件解析可能存在性能瓶颈，建议添加加载提示并限制上传文件大小

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