MuPDF.js PDF文本提取教程:如何3分钟获取带坐标与字体信息的结构化文本

发布时间:2026/8/22 13:53:14
MuPDF.js PDF文本提取教程:如何3分钟获取带坐标与字体信息的结构化文本 MuPDF.js PDF文本提取教程如何3分钟获取带坐标与字体信息的结构化文本【免费下载链接】mupdf.jsJavaScript bindings for MuPDF项目地址: https://gitcode.com/gh_mirrors/mu/mupdf.jsMuPDF.js是 MuPDF 的官方 JavaScript/TypeScript 库将 MuPDF C 引擎封装为 WebAssembly可在 Node.js、浏览器、Bun 与 Deno 中运行用于读取、渲染和操作 PDF 文档。本篇教程带你用 MuPDF.js 的toStructuredText()方法快速提取 PDF 纯文本以及带坐标、字体信息的 PDF 结构化文本——这是做 PDF 搜索、OCR 定位、文档解析、AI 数据预处理等场景的核心能力。为什么选择 MuPDF.js 做 PDF 文本提取 优势说明高精度基于与众多商业 PDF 阅读器相同的 MuPDF 引擎解析保真零原生依赖WebAssembly 自包含无需针对不同平台编译全平台运行Node.js 14、浏览器、Bun、Deno 通用TypeScript 优先自带类型定义IDE 自动补全开箱即用官方维护由 MuPDF 与 Ghostscript 的开发商 Artifex 官方维护快速安装与打开 PDF 文档MuPDF.js 的 npm 包名为mupdf注意是下划线风格旧的社区包mupdf-js已弃用一条命令即可安装无需额外下载npm install mupdf提示mupdf是 ESM 模块请使用import而非require()。打开 PDF 并加载页面只需两行核心代码import * as mupdf from mupdf const doc mupdf.PDFDocument.openDocument(data, application/pdf) const page doc.loadPage(0) // 页码从 0 开始第一步一行代码获取 PDF 纯文本如果你只需要页面上的文字内容toStructuredText().asText()直接返回字符串const text page.toStructuredText().asText() console.log(text) // 输出示例Welcome to the Node server test.pdf file.\n\n3\n...这是最简单的PDF 文本提取方式适合日志、归档、关键词统计等场景。官方测试用例可参考examples/tests/src/get_text.test.ts其中验证了提取结果与预期文本完全一致。第二步获取带坐标与字体信息的结构化文本纯文本丢失了版式信息。传入preserve-spans选项并调用asJSON()就能得到包含坐标bbox与字体font的结构化 JSONconst json page.toStructuredText(preserve-spans).asJSON()返回的 JSON 将页面内容分析并分组为blocks文本块→ lines行→ spans每个元素都带有位置与字体数据核心结构如下{ blocks: [ { type: text, bbox: { x: 30, y: 32, w: 216, h: 13 }, lines: [ { bbox: { x: 30, y: 32, w: 216, h: 13 }, font: { name: FKGYDXArial, family: sans-serif, weight: normal, style: normal, size: 12 }, x: 30, y: 43, text: Welcome to the Node server test.pdf file. } ] } ] }各字段含义一目了然bbox文本块的包围盒x、y 起点 w、h 宽高用于坐标定位、划词高亮、文本框选font.name / family字体名称与族可识别标题、正文字体差异font.size / weight / style字号、粗细、斜体用于还原文档层级结构如区分标题 14pt 与正文 12ptx / y行基线位置完整的真实示例 JSON 可查看项目中的 structured-text-example.json路径为docs/how-to-guide/structured-text-example.json。理解 MuPDF 坐标空间y 轴朝下拿到坐标后你需要知道坐标系方向。MuPDF.js 采用的是MuPDF 坐标空间——原点位于页面左上角y 轴向下增长而传统 PDF 规范的原点在左下角y 轴向上。两者的对比如下图所示这意味着你提取到的bbox.y 32表示该文本行距页面顶部32 点72 点 1 英寸。若要把坐标换算到 PDF 原生坐标系只需pdfY 页面高度 - mupdfY。页面高度可通过page.getBounds()获得返回格式为[ulx, uly, lrx, lry]左上角与右下角坐标。进阶玩法walk 遍历字符与搜索命中位置StructuredText对象还提供了两个实用能力1.walk()逐字符回调—— 可拿到每个字符的字体、字号和四边形坐标quadpage.toStructuredText(preserve-whitespace,preserve-spans).walk({ onChar(c, origin, font, size, quad) { // c: 字符font/size: 字体与字号quad: 字符四点坐标 } })2.search()文本搜索—— 返回关键词在页面上的命中区域可驱动搜索高亮const hits page.toStructuredText().search(MuPDF, 500)此外还有asHTML(id)把页面文本渲染为 HTML方便在浏览器中预览见examples/tasks/tasks.ts中的drawPageAsHTML。实战示例提取带矩形与字体信息的词列表把walk的逐字符能力组合起来就能按空格切分词为每个词合并出包围矩形、字体与字号——这正是做划词选择、机器阅读定位的常用数据结构。完整实现见examples/tasks/page-words.tsexport type MyWord { rect: mupdf.Rect // 词的包围矩形坐标 text: string // 词文本 font: mupdf.Font // 字体信息 size: number // 字号 }该示例用enlargeRect逐字符扩展矩形、用endLine/endTextBlock在换行和文本块结束时收尾思路清晰非常适合初学者阅读。常用选项速查表选项作用适用场景默认无参数基础文本流纯文本提取、搜索preserve-spans保留 span 级字体与坐标分组结构化解析、还原版式层级preserve-whitespace保留空白字符及位置词级切分、精确坐标定位preserve-images输出onImageBlock图像块回调同时提取图片位置与内容选项可以组合使用例如preserve-whitespace,preserve-spans。总结与延伸阅读MuPDF.js 的toStructuredText()一个方法覆盖了 PDF 文本提取的全部层次纯文本asText()一行搞定结构化文本asJSON()带坐标与字体信息直接用于解析、高亮、AI 预处理细粒度遍历walk()逐字符拿坐标search()定位关键词坐标换算记住 MuPDF 坐标系 y 轴朝下配合getBounds()即可换算更多 API 说明可参考项目内文档文本提取章节docs/how-to-guide/page.rst结构化文本 JSON 示例docs/how-to-guide/structured-text-example.json文本/HTML/搜索工具函数examples/tasks/tasks.ts词级坐标提取示例examples/tasks/page-words.ts提取效果测试examples/tests/src/get_text.test.ts掌握以上内容你就能在 JavaScript 世界里完整驾驭 PDF 文本提取与结构化解析了 【免费下载链接】mupdf.jsJavaScript bindings for MuPDF项目地址: https://gitcode.com/gh_mirrors/mu/mupdf.js创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考