上一篇记录了PDF文件预览功能。这一篇记录下docx文件预览。
核心文件
doc.html
<script src="./build/polyfill.min.js"></script>
<script src="./build/jszip.min.js"></script>
<script src="./build/docx-preview.js"></script>
上一篇记录了PDF文件预览功能。这一篇记录下docx文件预览。 核心文件为`doc.html`，在这个文件中，引入了几个关键的JavaScript文件来实现docx文件的预览功能。首先是`polyfill.min.js`，它的作用是为那些不支持某些现代JavaScript特性的浏览器提供垫片，确保在各种浏览器环境下都能正常运行相关代码，让我们的docx预览功能具备更广泛的兼容性。接着引入的`jszip.min.js`则是用于处理压缩文件的库，因为docx文件本质上是一种基于ZIP格式的压缩文件，通过这个库，我们能够对docx文件内部的结构进行解压缩和解析操作，为后续的内容提取和展示做准备。而`docx-preview.js`无疑是最为核心的部分，它封装了一系列复杂的逻辑，专门用于将解压缩后的docx文件内容转化为可在网页上直观展示的格式。 在实际应用场景中，比如企业内部的文档管理系统，员工需要在网页端快速预览各种docx格式的报告、合同等文件。通过这个基于`doc.html`构建的预览功能，用户只需在页面上点击相应的docx文件链接，后台便会将文件路径传递给前端。前端利用上述引入的JavaScript库，迅速对文件进行处理。`jszip.min.js`首先对docx文件进行解压缩，将其中包含的文本、图片、格式等信息释放出来。然后，`docx-preview.js`发挥作用，它根据文件内部的XML结构，将文本内容按照正确的格式排版，同时处理图片的加载和定位，最终在浏览器页面上呈现出与原始docx文件几乎一致的视觉效果。这不仅方便了用户快速查看文件内容，无需再单独下载和打开本地的办公软件，还提高了工作效率，让文档管理和协作变得更加流畅和便捷。
<!DOCTYPE html><html dir="ltr" mozdisallowselectionprint><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>DOCX viewer</title><!-- This snippet is used in production (included from viewer.html) --><link rel="resource" type="application/l10n" href="locale/locale.properties"><script src="./build/polyfill.min.js"></script><script src="./build/jszip.min.js"></script><script src="./build/docx-preview.js"></script><style>.doc-wrapper{padding:0px !important;overflow: auto;width: 100%;}/* 移动端文档样式 */.docx-mobile {max-width: 100vw; /* 设置最大宽度为视口宽度 */padding: 12px 0 !important; /* 添加内边距 */font-size: 14px; /* 缩小字体适应小屏幕 */line-height: 1.5em; /* 提高行间距以便阅读 */box-sizing: border-box; /* 确保宽度和边距适配 */overflow-wrap: break-word; /* 自动换行以避免溢出 */}.docx-mobile img {max-width: 100% !important; /* 图片宽度自动适应屏幕 */height: auto; /* 高度自动调整，保持比例 */display: block;margin: 10px auto; /* 给图片上下留空 */}.docx-mobile p, .docx-mobile div {padding:0px !important;max-width: 98% !important; /* 图片宽度自动适应屏幕 */margin: 0 auto 10px; /* 段落底部留空，避免内容拥挤 */}.docx-mobile h1, .docx-mobile h2, .docx-mobile h3 {font-size: 1.2em; /* 缩小标题字体 */font-weight: bold;margin: 0 0 8px;}/* 为底部注释和脚注提供较小的字体 */.docx-mobile .footnote, .docx-mobile .endnote {font-size: 12px;color: gray;}</style></head><body><div class="doc-wrapper"><div id="document-container" ref="filebox"></div></div><script>// 获取 URL 参数中的 'file' 参数值const urlParams = new URLSearchParams(window.location.search);const filePath = urlParams.get('file');if (filePath) {// 如果文件路径存在，尝试加载文件var xhr = new XMLHttpRequest();// 设置请求成功后的回调xhr.onload = function() {if (xhr.status === 200) {// 获取文件的二进制数据var arrayBuffer = xhr.response;console.log('arrayBuffer', arrayBuffer);const container = document.querySelector("#document-container");const docxOptions = Object.assign(docx.defaultOptions, {debug: false,experimental: true,inWrapper:false});const options = {ignoreHeight: true, // 忽略高度，自动适应容器大小ignoreWidth: true, // 忽略宽度，防止内容超出屏幕ignoreFonts: true, // 忽略字体，使用默认网页字体以优化显示效果breakPages: false, // 不分页，在移动端上不强制分页debug: false, // 关闭调试模式experimental: false, // 不使用实验性功能// className: "docx-mobile", // 设置为特定类名以便移动端样式定制className: "docx-pc", // 设置为特定类名以便移动端样式定制inWrapper: false, // 包裹在一个容器中，便于设置样式trimXmlDeclaration: true, // 去掉 XML 声明ignoreLastRenderedPageBreak: true, // 忽略最后一个分页符renderHeaders: false, // 不渲染页眉，节省空间renderFooters: false, // 不渲染页脚，节省空间renderFootnotes: true, // 渲染脚注，根据内容决定是否保留renderEndnotes: true, // 渲染尾注，根据内容决定是否保留useBase64URL: true, // 使用 Base64 URL 以便图片在移动端加载renderChanges: false, // 不渲染修订内容，减少页面元素renderComments: false // 不渲染评论，减少页面元素};console.log('docxOptions is', JSON.stringify(docxOptions))// const docxPreviewInstance = new DocxPreview(arrayBuffer);// docxPreviewInstance.render(document.getElementById('docx-preview-box'));setTimeout( async() => {let res = await docx.renderAsync(arrayBuffer, container, null, options)}, 200)} else {alert('无法加载文件，状态码: ' + xhr.status);}};// 设置请求失败时的回调xhr.onerror = function() {alert('无法加载文件');};// 发起 GET 请求xhr.open('GET', filePath);xhr.responseType = 'blob'; // 指定返回的响应类型为 ArrayBufferxhr.send();} else {alert('没有提供文件路径');}</script></body>
</html>特别提醒下只能够预览docx文件。
下面是资源地址，欢迎下载。https://download.csdn.net/download/weixin_37742709/90580946?spm=1001.2014.3001.5503
