前端实现docx格式word文件预览，可以兼容原生、vue2、以及uni-app 项目，详细步骤。

上一篇记录了PDF文件预览功能。这一篇记录下docx文件预览。

核心文件

doc.html

上一篇记录了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文件几乎一致的视觉效果。这不仅方便了用户快速查看文件内容，无需再单独下载和打开本地的办公软件，还提高了工作效率，让文档管理和协作变得更加流畅和便捷。

html 复制代码

<!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