WebDocViewer — 多格式文档在线预览插件
纯前端、零后端依赖的多格式文档在线预览组件，支持 PDF、OFD、DXF 图纸、图片、音视频、ZIP 压缩包及各类文本文件的浏览器内即时预览，内置水印、权限控制、缩略图导航等企业级能力。
支持格式
| 基于 pdfjs-dist 矢量渲染，支持文本层选中、目录大纲、缩略图、数字签名验证 | |
| OFD | 自研解析引擎，支持字体嵌入、电子签章（ESL/SES）解析与 SM3 验章、水印层、目录 |
| DXF | 纯前端 CAD 图纸预览，支持 LINE/ARC/CIRCLE/ELLIPSE/SPLINE/TEXT/INSERT 块引用等图元，滚轮缩放 + 拖拽平移 |
| 图片 | PNG/JPG/GIF/BMP/WebP/SVG，支持缩放、旋转 |
| 音频 | MP3/WAV/OGG/FLAC/AAC/M4A |
| 视频 | MP4/WebM/OGG |
| ZIP | 树形目录浏览，内部文件自动调用对应渲染器预览（PDF/OFD/DXF/图片/文本等） |
| 文本 | TXT/JSON/XML/HTML/CSS/JS/TS/Python/Java/SQL 等 40+ 扩展名，虚拟滚动 + 语法高亮，大文件异步分块加载不卡页面 |
核心功能
文档操作
- 翻页（上/下页、跳转指定页、页码输入）
- 缩放（工具栏按钮 + 鼠标滚轮，25%~300%）
- 旋转（90° 步进）
- 打印（隐藏 iframe 后台打印，自动等待图片加载）
- 下载原始文件
水印系统
- 文字水印 / 图片水印（图片优先）
- 可配置：字体、字号、颜色、透明度、旋转角度、平铺间距
- 支持追加实时时间（自定义格式 yyyy-MM-dd HH:mm:ss）
- 防删除机制（MutationObserver 自动恢复被移除的水印节点）
- 运行时动态设置 / 更新 / 移除
权限控制
- allowPrint：是否允许打印
- allowDownload：是否允许下载
- 工具栏按钮根据权限自动显隐
侧边栏导航
- PDF/OFD 缩略图面板（异步按需渲染）
- PDF 文档目录大纲（支持多级折叠）
- 点击缩略图/目录项跳转对应页
OFD 电子签章
- 自动检测 OFD 文件中的电子印章（ESL/SES 格式）
- 签章图片叠加渲染到对应页面
- 右键查看签章详情（签署者、证书信息、签署时间、SM3 摘要验证）
PDF 数字签名
- 自动检测 PDF 签名（ByteRange + PKCS#7）
- 浮动徽章提示已签名
- 验证文档完整性（SHA-256/SHA-1/SM3 摘要对比）
- 证书链验签（RSA/ECDSA，Web Crypto API）
大文件防卡死
- 文本解析全链路异步：分块解码（每 1MB 让出 UI）→ 分块拆行 → 虚拟滚动渲染
- 超长行（base64 等）自动截断显示 + 跳过高亮正则
- 滚动 rAF 节流，每帧最多渲染一次
- ZIP 内文本文件复用异步 TextRenderer
快速接入
安装
npm install web-ofd-view
或直接引入构建产物：
<link rel="stylesheet" href="./libs/style.css" />
<script type="module">
import { createDocViewer } from './libs/web-doc-viewer.js'
</script>
基本用法
import { createDocViewer } from 'web-ofd-view'
import 'web-ofd-view/style.css'
const viewer = createDocViewer({
el: '#viewer-container', // 挂载容器
url: '/files/demo.pdf', // 文件地址
width: 900,
initialScale: 1.0,
showToolbar: true,
showSidebar: true,
permissions: { allowPrint: true, allowDownload: true },
watermark: {
text: '仅供预览',
opacity: 0.08,
angle: –30,
showTime: true
},
onLoaded(meta) { /* 文件加载完成 */ },
onError(err) { /* 加载失败 */ },
onPageChange(current, total) { /* 翻页回调 */ }
})
加载方式
// URL 加载
await viewer.load('/files/report.ofd')
// File 对象（input[type=file] 选择）
await viewer.loadFile(file)
// ArrayBuffer（fetch / WebSocket 等场景）
await viewer.loadData(arrayBuffer, 'pdf')
实例 API
| load(url, type?) | 通过 URL 加载文件 |
| loadFile(file, type?) | 加载 File 对象 |
| loadData(data, type) | 加载 ArrayBuffer |
| goToPage(page) | 跳转指定页 |
| prevPage() / nextPage() | 上/下翻页 |
| rotate(deg) | 旋转（如 90、-90） |
| zoomIn() / zoomOut() | 放大/缩小 |
| resetZoom() | 重置缩放 |
| setScale(scale) | 设置缩放比例 |
| print() | 打印 |
| download(filename?) | 下载文件 |
| setWatermark(options | null) | 设置/移除水印 |
| getCurrentPage() | 获取当前页码 |
| getTotalPages() | 获取总页数 |
| getFileType() | 获取当前文件类型 |
| destroy() | 销毁实例，释放资源 |
构建
npm run build
产物位于 dist/ 目录：
| web-doc-viewer.js | ESM 格式（推荐） |
| web-doc-viewer.umd.cjs | UMD 格式（兼容 require） |
| style.css | 组件样式（必须引入） |
| *.d.ts | TypeScript 类型声明 |
技术栈
- 语言：TypeScript
- 构建：Vite 5（库模式，ESM + UMD 双格式输出）
- PDF 引擎：pdfjs-dist v3.11.174
- ZIP 解析：JSZip
- OFD/DXF：自研解析器（零依赖）
- 密码学：Web Crypto API + 内置 SM3 实现
浏览器兼容
支持所有现代浏览器（Chrome 80+、Firefox 78+、Edge 80+、Safari 14+）。
License
MIT
gitee地址
https://gitee.com/yangJoshua/WebDocViewer
