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
快速接入
安装
npminstallweb-ofd-view或直接引入构建产物：
<linkrel="stylesheet"href="./libs/style.css"/><scripttype="module">import{createDocViewer}from'./libs/web-doc-viewer.js'</script>基本用法
import{createDocViewer}from'web-ofd-view'import'web-ofd-view/style.css'constviewer=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 加载awaitviewer.load('/files/report.ofd')// File 对象（input[type=file] 选择）awaitviewer.loadFile(file)// ArrayBuffer（fetch / WebSocket 等场景）awaitviewer.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() | 销毁实例，释放资源 |
构建
npmrun 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