@jacktea/pdf-viewer-component
v0.1.20
Published
基于 Vanilla Web Components 标准实现的 PDF 预览与批注组件。
Readme
@jacktea/pdf-viewer-component
基于 Vanilla Web Components 标准实现的 PDF 预览与批注组件。
简介
这是一个轻量、高性能、高度可定制的 PDF 浏览器组件。由于采用原生 Web Components 构建，所以可以在任何前端框架（Vue、React、Angular、Svelte 等）或纯 HTML 环境下无缝运行。
特性
- 📝 开箱即用的批注功能：支持高亮、下划线、画笔、文本标签等多种注释。
- ⚡ 原生级性能：基于底层 WebAssembly 及原生 Web Components 的优秀渲染性能。
- 🎨 主题定制：方便灵活地配置组件主题与工具栏样式。
- 🌐 框架无关。
安装
npm install @jacktea/pdf-viewer-componentyarn add @jacktea/pdf-viewer-componentpnpm add @jacktea/pdf-viewer-component基础用法
如果你是原生 HTML / 原生 JS 开发者：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入组件库打包后的产物 -->
<script type="module" src="node_modules/@jacktea/pdf-viewer-component/dist/index.es.js"></script>
</head>
<body>
<!-- 直接使用自定义标签 -->
<pdf-viewer src="/path/to/your/document.pdf" style="width: 100%; height: 100vh;"></pdf-viewer>
</body>
</html>PDF Worker 默认行为
- 默认使用独立 worker 文件（
dist/pdf.worker.min.mjs），不会把 worker 内联为data:text/javascript。 - 生产环境消费方只需
import "@jacktea/pdf-viewer-component"，无需postinstall patch或全局 monkey patch。
可选覆盖方式
import {
setPdfJsResources,
setPdfJsWorkerSrc,
getDefaultPdfJsWorkerSrc,
} from "@jacktea/pdf-viewer-component";
// 方式一：统一资源配置（推荐）
setPdfJsResources({
workerSrc: "/pdfjs/pdf.worker.min.mjs",
});
// 方式二：仅覆盖 worker
setPdfJsWorkerSrc("/pdfjs/pdf.worker.min.mjs");
console.log(getDefaultPdfJsWorkerSrc());也可以在加载组件前设置全局配置：
<script>
window.__PDF_VIEWER_PDFJS_RESOURCES__ = {
workerSrc: "/pdfjs/pdf.worker.min.mjs",
};
</script>迁移说明
- 删除旧的 worker patch / monkey patch 逻辑。
- 保留
import "@jacktea/pdf-viewer-component"。 - 仅在需要自定义 worker 路径时显式覆盖。