前端实现docx格式word文件预览，可以兼容原生、vue2、以及uni-app 项目，详细步骤。
上一篇记录了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'; // 指定返回的响应类型为 ArrayBuffer
xhr.send();
} else {
alert('没有提供文件路径');
}
</script>
</body>
</html>特别提醒下只能够预览docx文件。
下面是资源地址，欢迎下载。https://download.csdn.net/download/weixin_37742709/90580946?spm=1001.2014.3001.5503