前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件，并实现在线预览功能。我在这里分享通过 mammoth.min.js 插件来实现docx在线预览功能
第1：下载地址，大家可以任意选取下面其中一种方式下载
(1)GitHub - mwilliamson/mammoth.js: Convert Word documents (.docx files) to HTML
(2)mammoth (v1.8.0) - Convert Word documents from docx to simple HTML and Markdown | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选
第2：在html中引入mammoth.min.js
在你的 HTML 文件中，使用 <script> 标签引入 mammoth.min.js 文件
第3：编写 JavaScript 代码来读取和转换 DOCX 文件
示例代码：docx中出现表格，如何通过mammoth.min.js成功实现在线预览
mammoth 库在转换 DOCX 文件时，默认情况下可能不会完全保留所有的格式和表格结构。为了更好地处理这些问题，styleMap 可以帮助你定义如何将 Word 样式映射到 HTML 样式
<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head><script type="text/javascript" th:src="@{/js/mammoth.browser.js}"></script><style>body {font-family: Arial, sans-serif;}table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd;padding: 8px;}th {background-color: #f2f2f2;text-align: left;}</style>
</head>
<body>
<div id="content"></div>
<script>async function loadAndConvertDocx() {const url = 'http://localhost:8080/document.docx?id='+Math.random()try {// 读取 DOCX 文件const response = await fetch(url);const arrayBuffer = await response.arrayBuffer();// 定义 styleMap 以更好地处理表格和格式const styleMap = ` p => pp[style-name='Heading 1'] => h1:freshp[style-name='Heading 2'] => h2:freshp[style-name='Heading 3'] => h3:freshp[style-name='Heading 4'] => h4:freshp[style-name='Heading 5'] => h5:freshp[style-name='Heading 6'] => h6:freshp[style-name='Normal'] => p:freshtable => tabletr => trtd => tdth => thtable[style-name='Table Normal'] => tabletr[style-name='Table Normal'] => trtd[style-name='Table Normal'] => tdth[style-name='Table Normal'] => thtable[style-name='Table Grid'] => tabletr[style-name='Table Grid'] => trtd[style-name='Table Grid'] => tdth[style-name='Table Grid'] => th`;// 使用 Mammoth 转换 DOCX 文件为 HTMLconst result = await mammoth.convertToHtml({arrayBuffer, styleMap: styleMap});const html = result.value; // The generated HTMLconst messages = result.messages; // Any messages, such as warnings during conversion// 将生成的 HTML 插入到页面中document.getElementById('content').innerHTML = html;} catch (error) {console.error('Error:', error);}}// 页面加载时调用 loadAndConvertDocx 函数window.addEventListener('load', loadAndConvertDocx);
</script>
</body>
</html>第4：如果你后端使用springboot(版本：2.7.5)框架，可以将某个存放docx文件的目录映射到 http://localhost:8080。这里只需要在application.yml配置 static-locations
spring:web:resources:static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/, file:D://upload//nursing
