当前位置：首页 > news >正文

前端文档阅读插件（PDF/OFD）

news 2026/7/22 13:04:47

WebDocViewer — 多格式文档在线预览插件

纯前端、零后端依赖的多格式文档在线预览组件，支持 PDF、OFD、DXF 图纸、图片、音视频、ZIP 压缩包及各类文本文件的浏览器内即时预览，内置水印、权限控制、缩略图导航等企业级能力。

支持格式

格式	说明
PDF	基于 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 类型声明