前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件
前端开发中如何在页面加载时自动读取并转换指定的 .docx 文件，并实现在线预览功能。我在这里分享通过 mammoth.min.js 插件来实现docx在线预览功能
第1：下载地址，大家可以任意选取下面其中一种方式下载
（1）GitHub - mwilliamson/mammoth.js: Convert Word documents (.docx files) to HTML
第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 => p
p[style-name='Heading 1'] => h1:fresh
p[style-name='Heading 2'] => h2:fresh
p[style-name='Heading 3'] => h3:fresh
p[style-name='Heading 4'] => h4:fresh
p[style-name='Heading 5'] => h5:fresh
p[style-name='Heading 6'] => h6:fresh
p[style-name='Normal'] => p:fresh
table => table
tr => tr
td => td
th => th
table[style-name='Table Normal'] => table
tr[style-name='Table Normal'] => tr
td[style-name='Table Normal'] => td
th[style-name='Table Normal'] => th
table[style-name='Table Grid'] => table
tr[style-name='Table Grid'] => tr
td[style-name='Table Grid'] => td
th[style-name='Table Grid'] => th
`;
// 使用 Mammoth 转换 DOCX 文件为 HTML
const result = await mammoth.convertToHtml({arrayBuffer, styleMap: styleMap});
const html = result.value; // The generated HTML
const 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
