【前端】：单 HTML 去除 Word 批注
在现代办公中，.docx 文件常用于文档编辑，但其中的批注（注释）有时需要在分享或归档前被去除。本文将从原理出发，深入剖析如何在纯前端环境下实现对 .docx 文件注释的移除，并提供完整的实现源码。最后，我们还将说明如何将 fflate.min.js 内嵌到项目中，实现零外部依赖。
一、原理解析
1. .docx 本质
.docx文件其实是一个 ZIP 压缩包。将其扩展名改为.zip并解压后，能看到包含多个 XML 文件和资源文件的目录结构。常用目录有：word/document.xml：主文档内容word/comments.xml：存储批注内容word/_rels/document.xml.rels：定义文档与资源（如批注）之间的关系
2. 去除注释的思路
- 删除批注文件：移除
word/comments.xml。 - 删除关系引用：在
word/_rels/document.xml.rels中，删除指向批注的<Relationship ... Type=".../comments" .../>节点。 - 清理文档标记：在
word/document.xml中，删除<w:commentRangeStart>、<w:commentRangeEnd>及<w:commentReference>等与批注相关的标记。
3. 纯前端技术栈
- ZIP 操作：使用 JavaScript 库（如
fflate）在浏览器环境完成解压与压缩，避免服务器依赖。 - 文件下载：利用浏览器原生的 Blob 与 URL API 生成下载链接。
- 交互体验：拖拽或点击上传区，自动触发处理与下载。
二、完整源码（依赖版本）
将以下内容保存为 remove_comments.html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Remove DOCX Comments</title><style>html, body { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } #drop-zone { width: 320px; height: 200px; border: 2px dashed #bbb; border-radius: 8px; background: white; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; cursor: pointer; transition: border-color 0.3s; } #drop-zone.dragover { border-color: #333; }</style>
</head>
<body><div id="drop-zone"><div><p>拖拽或点击上传 DOCX 文件</p><p style="font-size: 0.9em; color: #666;">上传后自动去除注释并下载</p></div><input type="file" id="file-input" accept=".docx" style="display: none;" /></div><script src="https://cdn.jsdelivr.net/npm/fflate@0.7.4/umd/index.js"></script><script>const dropZone = document.getElementById('drop-zone'), fileInput = document.getElementById('file-input');// 点击上传区域触发文件选择dropZone.addEventListener('click', () => fileInput.click());fileInput.addEventListener('change', e => handleFile(e.target.files[0]));// 拖拽事件处理['dragenter', 'dragover'].forEach(evn => dropZone.addEventListener(evn, e => { e.preventDefault(); dropZone.classList.add('dragover'); }));['dragleave', 'drop'].forEach(evn => dropZone.addEventListener(evn, e => { e.preventDefault(); dropZone.classList.remove('dragover'); }));dropZone.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));// 处理上传的文件async function handleFile(file) {if (!file || !file.name.endsWith('.docx')) return alert('请选择 .docx 文件');try {const buf = new Uint8Array(await file.arrayBuffer()), files = fflate.unzipSync(buf);// 删除注释文件delete files['word/comments.xml'];// 清理关系文件中的注释引用const relsPath = 'word/_rels/document.xml.rels';if (files[relsPath]) { let rels = fflate.strFromU8(files[relsPath]); rels = rels.replace(/<Relationship[^>]*Type="[^"]*comments[^"]*"[^>]*\/?>/g, ''); files[relsPath] = fflate.strToU8(rels); }// 清理正文中的注释标记const docPath = 'word/document.xml';if (files[docPath]) { let doc = fflate.strFromU8(files[docPath]); doc = doc.replace(/<w:commentRangeStart[^>]*\/>/g, '').replace(/<w:commentRangeEnd[^>]*\/>/g, '').replace(/<w:commentReference[^>]*\/>/g, ''); files[docPath] = fflate.strToU8(doc); }// 重新压缩并下载修改后的文件const newZip = fflate.zipSync(files), blob = new Blob([newZip], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = file.name.replace(/\\.docx$/, '') + '-no-comments.docx';document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href);} catch (err) {console.error(err); alert('处理文件失败，请确认文件格式');}}</script>
</body>
</html>
三、如何去除外部依赖，实现离线使用
若你希望完全离线使用此工具，可以将 fflate.min.js 内联到 HTML 中，而非通过 <script src=...> 引入。
- 打开 CDN 链接：https://unpkg.com/fflate@0.7.4/umd/index.js
- 复制该页面内容（即 fflate 的 UMD 构建版本）
- 替换上面 HTML 文件中的：
<script src="https://unpkg.com/fflate@0.7.4/umd/index.js"></script>
为：
<script>
// 粘贴 fflate.min.js 的内容在此处（即 var fflate = {...}）
</script>
这样，即使在无网络环境中，也可在浏览器本地运行该工具。