在现代办公中，.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：
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 文件中的：
html
<script src="https://unpkg.com/fflate@0.7.4/umd/index.js"></script>为：
html
<script>
// 粘贴 fflate.min.js 的内容在此处（即 var fflate = {...}）
</script>这样，即使在无网络环境中，也可在浏览器本地运行该工具。