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/OGGZIP树形目录浏览内部文件自动调用对应渲染器预览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/ECDSAWeb Crypto API大文件防卡死文本解析全链路异步分块解码每 1MB 让出 UI→ 分块拆行 → 虚拟滚动渲染超长行base64 等自动截断显示 跳过高亮正则滚动 rAF 节流每帧最多渲染一次ZIP 内文本文件复用异步 TextRenderer快速接入安装npminstallweb-ofd-view或直接引入构建产物linkrelstylesheethref./libs/style.css/scripttypemoduleimport{createDocViewer}from./libs/web-doc-viewer.js/script基本用法import{createDocViewer}fromweb-ofd-viewimportweb-ofd-view/style.cssconstviewercreateDocViewer({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[typefile] 选择awaitviewer.loadFile(file)// ArrayBufferfetch / WebSocket 等场景awaitviewer.loadData(arrayBuffer,pdf)实例 API方法说明load(url, type?)通过 URL 加载文件loadFile(file, type?)加载 File 对象loadData(data, type)加载 ArrayBuffergoToPage(page)跳转指定页prevPage()/nextPage()上/下翻页rotate(deg)旋转如 90、-90zoomIn()/zoomOut()放大/缩小resetZoom()重置缩放setScale(scale)设置缩放比例print()打印download(filename?)下载文件setWatermark(options | null)设置/移除水印getCurrentPage()获取当前页码getTotalPages()获取总页数getFileType()获取当前文件类型destroy()销毁实例释放资源构建npmrun build产物位于dist/目录文件说明web-doc-viewer.jsESM 格式推荐web-doc-viewer.umd.cjsUMD 格式兼容 requirestyle.css组件样式必须引入*.d.tsTypeScript 类型声明技术栈语言TypeScript构建Vite 5库模式ESM UMD 双格式输出PDF 引擎pdfjs-dist v3.11.174ZIP 解析JSZipOFD/DXF自研解析器零依赖密码学Web Crypto API 内置 SM3 实现浏览器兼容支持所有现代浏览器Chrome 80、Firefox 78、Edge 80、Safari 14。LicenseMITgitee地址https://gitee.com/yangJoshua/WebDocViewer