Tesseract.js实战案例：从PDF中提取文本的完整流程-优快云博客

Tesseract.js实战案例：从PDF中提取文本的完整流程

【免费下载链接】tesseract.js Pure Javascript OCR for more than 100 Languages 📖🎉🖥 项目地址: https://gitcode.com/gh_mirrors/te/tesseract.js

你是否还在为无法编辑的PDF文档烦恼？是否遇到过需要从扫描版PDF中提取关键信息却只能手动输入的困境？本文将带你使用Tesseract.js（纯JavaScript光学字符识别库）实现从PDF中提取文本的全流程，无需复杂的后端服务，在浏览器或Node.js环境下即可高效完成。读完本文后，你将掌握：PDF转图像的核心原理、Tesseract.js的高级配置技巧、多语言识别优化方法，以及批量处理PDF文件的性能调优策略。

技术背景与工作原理

OCR技术简介

OCR（Optical Character Recognition，光学字符识别）是将图像中的文本转换为可编辑文本的技术。Tesseract.js作为Google Tesseract OCR引擎的JavaScript移植版，支持超过100种语言，可在浏览器和Node.js环境中运行，无需安装额外依赖。其核心优势在于：

跨平台兼容性：浏览器/Node.js双环境支持
零后端依赖：纯前端即可完成OCR识别
可定制化：支持语言包扩展、识别区域指定等高级功能

PDF文本提取的技术路径

PDF文件本质上是一种页面描述语言，包含文本、图像、矢量图形等元素。从PDF中提取文本的技术路径主要有两种：

文本层提取：直接读取PDF中的文本内容（适用于原生PDF）
图像层OCR：将PDF页面转换为图像后进行OCR识别（适用于扫描版PDF）

Tesseract.js专注于第二种场景，完整工作流程如下：

mermaid

环境准备与基础配置

安装与引入

Node.js环境

# 通过npm安装
npm install tesseract.js
# 或使用yarn
yarn add tesseract.js

浏览器环境

推荐使用国内CDN引入，确保访问速度：

<!-- 国内CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>

核心API概览

Tesseract.js提供了简洁的API接口，核心功能通过createWorker()创建的Worker对象实现：

方法	描述	主要参数
`createWorker()`	创建OCR Worker实例	`langs`(语言), `oem`(引擎模式), `options`(配置)
`worker.recognize()`	执行OCR识别	`image`(图像源), `options`(识别参数), `output`(输出格式)
`worker.setParameters()`	设置识别参数	`params`(参数对象)
`worker.terminate()`	终止Worker实例	-

实现步骤（Node.js版本）

1. 项目结构与依赖安装

# 创建项目目录
mkdir tesseract-pdf-extract && cd tesseract-pdf-extract
# 初始化项目
npm init -y
# 安装核心依赖
npm install tesseract.js pdf-parse pdf-image --save

2. PDF转图像实现

使用pdf-image库将PDF页面转换为PNG图像：

const PDFImage = require('pdf-image').PDFImage;
const path = require('path');
const fs = require('fs');

async function pdfToImages(pdfPath) {
  // 创建PDFImage实例
  const pdfImage = new PDFImage(pdfPath, {
    convertOptions: {
      '-density': '300', // 设置DPI，影响识别精度
      '-quality': '100'  // 图像质量
    }
  });
  
  try {
    // 获取所有页面的图像路径
    const imagePaths = await pdfImage.convertFile();
    console.log(`PDF转换完成，共${imagePaths.length}页`);
    return imagePaths;
  } catch (err) {
    console.error('PDF转换失败:', err);
    throw err;
  }
}

3. Tesseract.js文本识别

创建OCR Worker并处理图像：

const { createWorker } = require('tesseract.js');

async function ocrImage(imagePath, lang = 'eng') {
  // 创建Worker实例，配置中文识别
  const worker = await createWorker(lang, 1, {
    logger: m => console.log(`[${m.status}] ${m.progress.toFixed(2)}%`), // 进度日志
    langPath: 'https://cdn.jsdelivr.net/npm/tesseract.js-lang/' // 国内语言包CDN
  });
  
  try {
    // 设置识别参数
    await worker.setParameters({
      tessedit_pageseg_mode: 3, // PSM.AUTO (自动页面分段)
      preserve_interword_spaces: '1' // 保留单词间空格
    });
    
    // 执行OCR识别
    const { data: { text } } = await worker.recognize(imagePath);
    return text;
  } finally {
    // 终止Worker，释放资源
    await worker.terminate();
  }
}

4. 完整流程整合

async function extractTextFromPdf(pdfPath, outputPath) {
  try {
    // 1. PDF转图像
    const imagePaths = await pdfToImages(pdfPath);
    
    // 2. 批量OCR识别
    let fullText = '';
    for (let i = 0; i < imagePaths.length; i++) {
      console.log(`识别第${i+1}/${imagePaths.length}页...`);
      const pageText = await ocrImage(imagePaths[i], 'chi_sim+eng'); // 中英文混合识别
      fullText += `\n===== 第${i+1}页 =====\n${pageText}`;
      
      // 清理临时图像文件
      fs.unlinkSync(imagePaths[i]);
    }
    
    // 3. 保存结果
    fs.writeFileSync(outputPath, fullText);
    console.log(`识别完成，结果保存至${outputPath}`);
    return fullText;
  } catch (err) {
    console.error('处理失败:', err);
  }
}

// 执行示例
extractTextFromPdf('input.pdf', 'output.txt');

实现步骤（浏览器版本）

1. HTML结构设计

<!DOCTYPE html>
<html>
<head>
    <title>PDF文本提取工具</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/pdfjs-dist/3.4.120/pdf.min.js"></script>
    <style>
        .container { max-width: 800px; margin: 20px auto; padding: 20px; }
        #output { width: 100%; height: 300px; margin-top: 20px; }
        .progress { height: 20px; background: #eee; margin: 10px 0; }
        .progress-bar { height: 100%; background: #4CAF50; width: 0%; }
    </style>
</head>
<body>
    <div class="container">
        <h1>PDF文本提取工具</h1>
        <input type="file" id="pdf-upload" accept=".pdf">
        <div class="progress">
            <div id="progress-bar" class="progress-bar"></div>
        </div>
        <textarea id="output" placeholder="识别结果将显示在这里..."></textarea>
        <button id="download-btn" style="margin-top:10px;">下载结果</button>
    </div>
</body>
</html>

2. PDF渲染与OCR识别

document.addEventListener('DOMContentLoaded', () => {
    const pdfUpload = document.getElementById('pdf-upload');
    const outputText = document.getElementById('output');
    const progressBar = document.getElementById('progress-bar');
    const downloadBtn = document.getElementById('download-btn');
    
    // 配置pdf.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdfjs-dist/3.4.120/pdf.worker.min.js';
    
    pdfUpload.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        outputText.value = '正在处理，请稍候...';
        progressBar.style.width = '0%';
        
        try {
            // 1. 加载PDF文件
            const fileReader = new FileReader();
            const pdfData = await new Promise((resolve) => {
                fileReader.onload = (e) => resolve(e.target.result);
                fileReader.readAsArrayBuffer(file);
            });
            
            // 2. 获取PDF文档
            const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
            const numPages = pdfDoc.numPages;
            let fullText = '';
            
            // 3. 创建Tesseract Worker
            const worker = await Tesseract.createWorker('chi_sim+eng', 1, {
                logger: (m) => {
                    if (m.status === 'recognizing text') {
                        const overallProgress = ((currentPage - 1 + m.progress) / numPages) * 100;
                        progressBar.style.width = `${overallProgress}%`;
                    }
                },
                langPath: 'https://cdn.jsdelivr.net/npm/tesseract.js-lang/'
            });
            
            // 4. 逐页处理
            for (let currentPage = 1; currentPage <= numPages; currentPage++) {
                outputText.value = `正在处理第${currentPage}/${numPages}页...`;
                
                // 4.1 渲染PDF页面为图像
                const page = await pdfDoc.getPage(currentPage);
                const viewport = page.getViewport({ scale: 2.0 }); // 缩放提高识别精度
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                await page.render({
                    canvasContext: context,
                    viewport: viewport
                }).promise;
                
                // 4.2 转换为ImageData
                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                
                // 4.3 OCR识别
                const { data: { text } } = await worker.recognize(imageData);
                fullText += `\n===== 第${currentPage}页 =====\n${text}`;
            }
            
            // 5. 清理与结果展示
            await worker.terminate();
            outputText.value = fullText;
            progressBar.style.width = '100%';
            alert('处理完成！');
            
        } catch (err) {
            console.error('处理失败:', err);
            outputText.value = `处理失败: ${err.message}`;
        }
    });
    
    // 下载结果
    downloadBtn.addEventListener('click', () => {
        const text = outputText.value;
        if (!text) return;
        
        const blob = new Blob([text], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'pdf-ocr-result.txt';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });
});

高级配置与优化策略

识别参数优化

Tesseract.js提供丰富的参数配置，可根据具体场景优化识别效果：

// 常用优化参数
await worker.setParameters({
    // 页面分段模式 (PSM)
    tessedit_pageseg_mode: 6, // PSM.SINGLE_COLUMN (单列文本)
    
    // 字符白名单 (限制识别字符集)
    tessedit_char_whitelist: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
    
    // 图像预处理
    preprocess_gray: '1', // 灰度化处理
    preprocess_threshold: '1', // 二值化处理
    
    // 自定义DPI (解决低分辨率警告)
    user_defined_dpi: '300'
});

多语言识别配置

Tesseract.js支持多语言混合识别，只需在创建Worker时指定语言代码：

// 中英文混合识别
const worker = await createWorker('chi_sim+eng', 1, { ... });

// 中日韩语言包配置
const worker = await createWorker('chi_sim+jpn+kor', 1, { ... });

常用语言代码：

eng - 英语
chi_sim - 简体中文
chi_tra - 繁体中文
jpn - 日语
kor - 韩语
fra - 法语
spa - 西班牙语

性能优化方案

1. 图像预处理

// 图像预处理函数 (Node.js版本)
function preprocessImage(imagePath) {
    return new Promise((resolve, reject) => {
        sharp(imagePath)
            .resize(1600, null, { fit: 'inside' }) // 按比例缩小
            .grayscale() // 转为灰度图
            .threshold(180) // 二值化处理
            .toFile(`${imagePath}.processed.png`, (err) => {
                if (err) reject(err);
                else resolve(`${imagePath}.processed.png`);
            });
    });
}

2. 使用Scheduler实现并行处理

const { createScheduler, createWorker } = require('tesseract.js');

async function batchProcessImages(imagePaths) {
    // 创建调度器
    const scheduler = createScheduler();
    
    // 创建多个Worker (根据CPU核心数)
    const numWorkers = Math.min(4, imagePaths.length); // 最多4个Worker
    for (let i = 0; i < numWorkers; i++) {
        const worker = await createWorker('chi_sim+eng');
        scheduler.addWorker(worker);
    }
    
    // 添加任务队列
    const results = await Promise.all(
        imagePaths.map((imagePath) => 
            scheduler.addJob('recognize', imagePath)
        )
    );
    
    // 终止所有Worker
    await scheduler.terminate();
    
    // 处理结果
    return results.map((result) => result.data.text);
}

常见问题与解决方案

1. 识别精度低

可能原因：

图像分辨率过低
图像存在噪声或倾斜
字体特殊或过小

解决方案：

// 提高图像分辨率
const viewport = page.getViewport({ scale: 3.0 }); // 增加缩放比例

// 设置页面分段模式
await worker.setParameters({
    tessedit_pageseg_mode: 12 // PSM.RAW_LINE (原始行识别，适合特殊字体)
});

2. 中文识别乱码

可能原因：

语言包未正确加载
编码问题
混合语言识别配置错误

解决方案：

// 显式指定语言包路径
const worker = await createWorker('chi_sim', 1, {
    langPath: 'https://cdn.jsdelivr.net/npm/tesseract.js-lang/',
    cacheMethod: 'refresh' // 强制刷新缓存
});

3. 浏览器环境内存溢出

解决方案：

限制并发Worker数量
及时终止不再使用的Worker
分批次处理大文件

// 优化的Worker管理
async function processLargePdf(pdfDoc, numPages) {
    const BATCH_SIZE = 2; // 每次处理2页
    let fullText = '';
    
    for (let i = 1; i <= numPages; i += BATCH_SIZE) {
        const worker = await Tesseract.createWorker('chi_sim+eng');
        const batchEnd = Math.min(i + BATCH_SIZE - 1, numPages);
        
        for (let pageNum = i; pageNum <= batchEnd; pageNum++) {
            // 处理单页...
        }
        
        await worker.terminate(); // 处理完批次后立即释放
    }
    
    return fullText;
}

项目实战：财务报表自动提取系统

系统架构

mermaid

核心功能实现

class PDFProcessor {
    constructor() {
        this.ocrService = new OCRService();
        this.textAnalyzer = new TextAnalyzer();
    }
    
    async processFinancialReport(pdfPath) {
        // 1. PDF转图像
        const imagePaths = await this.convertToImages(pdfPath);
        
        // 2. 图像预处理
        const processedImages = await this.preprocessImages(imagePaths);
        
        // 3. OCR文本提取
        const rawText = await this.ocrService.processBatch(processedImages);
        
        // 4. 文本分析与结构化
        const structuredData = this.textAnalyzer.extractFinancialData(rawText);
        
        // 5. 结果导出
        return this.exportResults(structuredData, 'json');
    }
    
    // 其他方法实现...
}

总结与扩展

本文详细介绍了使用Tesseract.js从PDF中提取文本的完整流程，包括环境搭建、核心API使用、优化策略及实战案例。通过合理配置识别参数、优化图像质量和使用并行处理技术，可以显著提升OCR识别精度和效率。

扩展方向

多模态输入：结合摄像头实时拍摄文档进行OCR识别
表格提取：使用Tesseract.js的TSV输出格式实现表格结构化提取
云服务集成：将本地OCR与云端API结合，实现大规模处理
AI辅助校对：结合NLP技术对识别结果进行自动纠错

工具与资源推荐

语言包下载：tesseract.js-lang
图像预处理：Sharp (Node.js)、Fabric.js (浏览器)
PDF处理：pdf-parse、pdf-lib
性能监控：Chrome DevTools Performance面板

【免费下载链接】tesseract.js Pure Javascript OCR for more than 100 Languages 📖🎉🖥 项目地址: https://gitcode.com/gh_mirrors/te/tesseract.js

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考