在Angular中使用Tesseract.js库如何保留原文档的缩进与空格？

核心修改逻辑 #

• 初始化Tesseract Worker时开启preserve_interword_spaces配置，开启后Tesseract会保留识别到的词间多空格、缩进格式
• 识别结果输出后不要手动执行空格合并、首尾去空等格式化操作
• 前端渲染识别结果时，需要给展示容器设置white-space: pre-wrap或white-space: pre样式，避免HTML默认合并多个连续空格

修改后的实现代码 #

async doOCR() {
    const worker = createWorker({
      logger: m => console.log(m),
      // 开启保留词间空格配置
      preserve_interword_spaces: '1',
      // 可选：调整页面分割模式为「假设单一均匀的文本块」，提升规则排版文本的识别准确率
      tessedit_pageseg_mode: '6'
    });
    
    await worker.load();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
    // 直接取data.text即可获得带空格缩进的识别结果
    const { data: { text } } = await worker.recognize(this.selectedFile);
    // 此处text就是保留了原始空格、缩进的识别结果
    console.log(text);

    // 识别完成后销毁worker释放客户端资源
    await worker.terminate();
}

前端渲染示例 #

如果要在Angular模板中正常展示带格式的识别结果，模板代码参考：

<!-- 添加white-space配置保证空格、缩进不被HTML自动合并 -->
<div style="white-space: pre-wrap; border: 1px solid #eee; padding: 12px;">
  {{ ocrResultText }}
</div>

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