前端web端解析 Word、Pdf 文档文本内容

一、使用 mammoth.js 解析 word 文档

需要注意的是在 web 端使用mammoth.js 解析 word 文档时需要引入mammoth.js 的浏览器版本,否则虽然本地能够正常运行,但是打包到线上就会报错。

javascript 复制代码
import * as mammoth from "mammoth/mammoth.browser.min.js";


  /**
   * 解析 Word 文档
   */
  private async parseWordDocument(file: File): Promise<string> {
    const arrayBuffer = await file.arrayBuffer();
    const result = await mammoth.extractRawText({ arrayBuffer });
    return result.value;
  }

二、使用 pdfjs-dist 解析 pdf 文档

1,安装依赖. "pdfjs-dist": "^5.4.530",

npm i pdfjs-dist -D

2,添加 webworker 文件

在项目中的public 目录中创建 pdf-workers 目录,并把node_modules 中的pdfjs-dist 下面的build 目录下的pdf.worker.min.mjs 复制粘贴进 pdf-workers 目录中

3,解析 pdf 文档中的文本内容

javascript 复制代码
import * as pdfjsLib from "pdfjs-dist";


// 设置 PDF.js worker
if (typeof window !== "undefined") {
  // 从 public/pdf-workers 文件夹加载 worker
  pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf-workers/pdf.worker.min.mjs";
}


  /**
   * 解析 PDF 文档
   */
  private async parsePdfDocument(file: File): Promise<string> {
    const arrayBuffer = await file.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

    let text = "";
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const textContent = await page.getTextContent();
      const pageText = textContent.items.map((item: any) => item.str).join(" ");
      text += pageText + "\n";
    }
    text = text.replace(/\u0001/g, " ");
    return text;
  }

三、解析 pdf 文档添加 polyfill 兼容低版本浏览器

在某些低版本浏览器中可能会提示 not fond promiseWidthResolvers , 需要增加一个polyfill

1, 在 pdf-workers 中创建一个 pdf-polyfill.js 文件

javascript 复制代码
if (typeof Promise.withResolvers === 'undefined') {
  Promise.withResolvers = function () {
    let resolve, reject
    const promise = new Promise((res, rej) => {
      resolve = res
      reject = rej
    })
    return { promise, resolve, reject }
  }
}

2,在 index.html 文件中进入 pdf-polyfill.js 文件

javascript 复制代码
    <script type="module" src="/pdf-workers/pdf-profill.js"></script>
相关推荐
SamChan906 小时前
用Playwright端到端测试PDF翻译功能:Web自动化测试实战
前端·python·ai·pdf·wpf
AI英德西牛仔6 小时前
千问导出 pdf 颜色不一样怎么办,选用 AI 导出鸭优化格式转换,多维度剖析千问内容 PDF 变色各类成因
人工智能·ai·chatgpt·pdf·deepseek·ai导出鸭
breeze jiang7 小时前
NestJS MVC 实战:用 hello 项目 7 个文件讲清分层、装饰器、依赖注入与错误处理
node.js·mvc·js
赵广陆1 天前
企业实战:主体识别
langchain·pdf·langgraph
AI英德西牛仔1 天前
豆包导出 pdf 颜色不一样怎么办,选用 AI 导出鸭优化文档导出,结合行业白皮书数据解析色彩失真成因
人工智能·ai·chatgpt·pdf·deepseek·ai导出鸭
薰珞婷紫小亭子1 天前
如何解决IEEE期刊LaTeX 模版编译pdf出现大空白的问题
经验分享·pdf
Hello-FPGA1 天前
AI 如何自动通过 PDF 原理图生成管脚映射
人工智能·fpga开发·pdf
阿部多瑞 ABU1 天前
告别手工核图:基于 .NET + MuPDFCore 的 CAD 等轴测 PDF 材料表提取与新旧版本对比实战
后端·算法·ui·pdf·c#
weixin_431600442 天前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
2601_963906782 天前
可自由切割与合并的 PDF 尺寸调整与打印工具
pdf