Skip to content

查看器组件

四版查看器共享同一套实现:WPS 风格工具栏、翻页器、缩放(适应宽度/百分比)、下载、缩略图侧栏、Office 式页角裁切标记、加密文档密码弹窗,均默认启用重排分页。

在线 Demo

Demo 默认加载站点内置的 demo.docx,也可以通过文件选择器预览本地文档(纯浏览器解析,不上传服务器)。

组件 Props / 事件

Vue / React / Svelte 三个组件接口一致(Svelte 用 class 而不是 className):

Prop类型说明
urlstring | null文档地址,默认 GET 读取;变化即重新加载。为空时显示空态
customRequest(url) => Promise<Blob | ArrayBuffer | Uint8Array | null>自定义请求(鉴权头等);缺省用 fetch GET
namestring下载文件名
initialScale'fit' | number初始缩放:适应宽度或百分比
showThumbsboolean初始是否显示缩略图侧栏
renderOptionsPartial<Options>透传给核心库的渲染选项(如 fonts

事件:onRendered / onError(Vue 写法 @rendered / @error)。

原生查看器(独立部署)

GitHub Releases 下载 docx-preview-viewer-{version}.zip,解压后部署到任意静态服务器——不依赖 npm、不需要构建工具、无第三方 CDN,通过 iframe 或浏览器直接使用:

html
<iframe src="/viewer.html?file=https://example.com/document.docx"></iframe>
<!-- 可选初始缩放: 适应宽度(默认) / 自然尺寸百分比 -->
<iframe src="/viewer.html?file=...&scale=fit | 75 | 0.75"></iframe>
<!-- 可选初始缩略图侧栏: 显示(默认) / 隐藏 -->
<iframe src="/viewer.html?file=...&thumbs=1 | 0"></iframe>
<!-- 可选显式文档名(下载文件名 + 标题),用于媒体库等不透明地址 -->
<iframe src="/viewer.html?file=...&filename=report.docx"></iframe>

CORS 注意

预览器在浏览器内通过 fetch 加载 DOCX URL,文件服务器必须允许跨域请求(Access-Control-Allow-Origin),或把预览器与文件放在同一来源下。

旧式二进制文档(老 .doc.wps)会被预先识别并给出"另存为 .docx"的明确提示;只有 OOXML 包可以渲染。

带打开密码的 .docx(ECMA-376 Agile 加密)由核心库 decryptDocx 解密:查看器会弹出密码框,密码错误在弹窗内提示,取消则回到空态。Office 2007 的 Standard 加密与证书加密暂不支持,会给出对应提示。

Based on docxjs by Volodymyr Baydalka