如何在Angular前端应用中将PDF文档转换为数组（客户端侧）

方案1：用pdfjs-dist解析文本后整理表格结构 #

pdfjs-dist是Mozilla官方的浏览器端PDF解析库，完全支持客户端运行，适配Angular项目。

步骤如下：

1. 安装依赖：

npm install pdfjs-dist

2. 在Angular组件中实现解析逻辑：

import * as pdfjsLib from 'pdfjs-dist';
import { pdfjsWorker } from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

async extractPdfTableData(file: File): Promise<string[][]> {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
  const tableData: string[][] = [];

  // 遍历PDF所有页面
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const page = await pdf.getPage(pageNum);
    const textContent = await page.getTextContent();
    
    // 按Y坐标分组识别行（PDF坐标原点在左下角，Y值越大数据位置越靠上）
    let currentRow: string[] = [];
    let lastYPosition = null;

    textContent.items.forEach((item: any) => {
      // 用Y坐标差值判断是否换行（阈值可根据表格排版调整）
      if (lastYPosition && Math.abs(item.transform[5] - lastYPosition) > 5) {
        tableData.push(currentRow);
        currentRow = [];
      }
      currentRow.push(item.str.trim());
      lastYPosition = item.transform[5];
    });
    // 加入当前页最后一行数据
    if (currentRow.length > 0) {
      tableData.push(currentRow);
    }
  }

  return tableData;
}

说明：该方案通过文本块的位置坐标识别行结构，适合规则排版的表格。如果表格存在合并单元格，需要额外处理文本块的坐标关联逻辑。

方案2：用pdf-parse轻量解析（适合纯文本规整表格） #

部分版本的pdf-parse支持浏览器环境，可快速实现简单表格提取：

1. 安装兼容版本：

npm install pdf-parse@1.1.1

2. 组件中实现逻辑：

import pdf from 'pdf-parse';

async extractPdfTable(file: File): Promise<string[][]> {
  const dataBuffer = await file.arrayBuffer();
  const pdfData = await pdf(dataBuffer);
  // 按换行分割行，再按多空格分割列（需根据表格实际分隔规则调整）
  const rows = pdfData.text.split('\n').filter(row => row.trim() !== '');
  return rows.map(row => row.split(/\s{2,}/).map(cell => cell.trim()));
}

说明：该方案实现简单，但依赖PDF文本的排版规则（比如列之间有足够多的空格分隔），仅适用于结构规整的纯文本表格。

额外提示 #

• 确保Angular打包配置允许这些库在浏览器端运行，无需Node.js环境依赖。
• 如果是扫描生成的图片型PDF，以上方法无法直接提取文本，需要结合tesseract.js这类客户端OCR工具先识别文本，再进行表格结构整理。

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