莱克特
React的无头PDF查看器. 将页面、文本选择、搜索和说明写入自己的阅读经验。 Lector处理PDF.js渲染和页面虚拟化;您控制了布局和UI.
在屏幕上获取 PDF
使用回放19+. 当前来源预计 pdfjs-dist ^5.5.207。这些文档轨道 main; 检查 释放 与您安装的软件包版本相对应.
npm install @anaralabs/lector pdfjs-dist@^5.5.207
复制 PDF.js 的工人 从您的应用程序安装的依赖性到它的公共资产。 当您更新 PDF.js 时, 复制它, 这样运行时间和工人版本匹配 .
mkdir -p public/pdfjs
cp node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs public/pdfjs/
设置 PDF 位址 public/sample.pdf,然后添加此浏览器已交付的组件 :
import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
import { GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";
import "pdfjs-dist/web/pdf_viewer.css";
GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.mjs";
export default function PDFViewer() {
return (
<Root
source="/sample.pdf"
style={{ height: 600 }}
loader={<p role="status">Loading PDF…</p>}
>
<Pages>
<Page>
<CanvasLayer />
<TextLayer />
</Page>
</Pages>
</Root>
);
}
对于 下一个.js,通过客户端组件使用 dynamic(..., { ssr: false }); 将 PDF.js 设置在动态加载模块内。 见 安装 用于全包装,维特工人设置,以及路径前缀下方的部署.
Root 装入文档并提供其状态. Pages 拥有滚动和克隆一个 Page 可见页面模板. CanvasLayer 绘制PDF; TextLayer 添加可选文本 。 给取景者一个确定的高度并导入 PDF.js 样式表, 使其分层对齐 .
构建您的应用需要的阅读器
| 特性 | 从这里开始 |
|---|---|
| 工具栏、页面输入和布局 | 你的第一个观众 |
| 认证的 URL、 本地文件、 错误和自寄资产 | 正在装入文档 |
| 页面导航和适应宽度 | 导航, (中文(简体) ), 缩放 |
| 页面预览 | 缩略图 |
| 文本搜索和突出显示的结果 | 搜索 |
| 甄选和引用区域 | 选择, (中文(简体) ), 突出内容 |
| PDF 链接和可编辑窗体字段 | 链接, (中文(简体) ), 表单 |
| 暗页渲染 | 黑暗模式 |
| 道具、钩子和默认 | API 参考 |
Lector是一个工具包,而不是一个完成的工具栏或PDF编辑器. 您的应用程序提供可访问控制、 错误 UI 和用户说明的存储 。 搜索需要嵌入式文本;它不执行OCR. 自定义亮度覆盖不会自动修改 PDF 文件 。 见 排除出问题 包括工人错误、空白页和排版问题.
使用编码助手
连接 MCP 客户端 https://anara.com/lector/mcp 使用可流取的 HTTP,没有 API 密钥。 它可以通过工具和资源搜索和阅读每一个指南。 见 人工智能特工和MCP 用于设置和实例请求.
直接取取时, 首先 页:1读取 个人马克下线指南,或使用 完整文档。这些出口来自与网站相同的来源.
关于Lector的工作
从寄存器根起,有节点.js 22.13+和pnpm 9.5.0:
pnpm install --frozen-lockfile
pnpm --filter @anaralabs/lector build
pnpm --filter docs dev
打开 本地主机 : 000/ docs。 Docs 应用程序使用本地工作空间软件包。 将表模式、验证命令和另一个应用程序中的测试改为 捐款额。 。 。 .
鸣谢
灵感来自 无头反应- pdf 财务报告和审定财务报表 pdf阅读器。在 PDF.js (英语) 财务报告和审定财务报表 反应。 。 。 .