前端实现 Word 文档在线编辑与导出：基于 mammoth.js 与 Blob 对象

前端实现 Word 文档在线编辑与导出：基于 mammoth.js 与 Blob 对象 | 极客日志

// 基本转换示例
mammoth.convertToHtml({arrayBuffer: arrayBuffer}).then(function(result) {
    // result.value 包含生成的 HTML
    document.getElementById('editor').innerHTML = result.value;
}).catch(function(error) {
    console.error('转换出错：', error);
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Word 在线编辑器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.5.1/mammoth.browser.min.js"></script>
    <style>
        .editor-container { display: flex; height: 80vh; }
        #editor { flex: 1; border: 1px solid #ccc; padding: 20px; overflow-y: auto; }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept=".docx">
    <button id="exportBtn">导出为 Word</button>
    <div class="editor-container">
        <div id="editor" contenteditable="true"></div>
    </div>
    <script>// 实现代码将在这里</script>
</body>
</html>

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
        const arrayBuffer = e.target.result;
        // 使用 mammoth 进行转换
        mammoth.convertToHtml({arrayBuffer: arrayBuffer}).then(function(result) {
            document.getElementById('editor').innerHTML = result.value;
        }).catch(function(error) {
            console.error('转换出错：', error);
        });
    };
    reader.readAsArrayBuffer(file);
});

document.getElementById('exportBtn').addEventListener('click', function() {
    // 获取编辑后的内容
    const editedContent = document.getElementById('editor').innerHTML;
    // 创建 Word 文档的 HTML 结构
    const fullHtml = `
        <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
        <head>
            <meta charset="UTF-8">
            <title>编辑后的文档</title>
            <style>
                body { font-family: '宋体', serif; font-size: 12pt; }
            </style>
        </head>
        <body>${editedContent}</body>
        </html>`;
    // 创建 Blob 对象并触发下载
    const blob = new Blob(['\uFEFF' + fullHtml], { type: 'application/msword' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '编辑后的文档.doc';
    document.body.appendChild(a);
    a.click();
    // 清理资源
    setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }, 100);
});

const options = {
    styleMap: [
        "p[style-name='Title'] => h1:fresh",
        "p[style-name='Subtitle'] => h2:fresh",
        "p[style-name='Warning'] => div.warning:fresh",
        "b => strong",
        "i => em"
    ]
};
mammoth.convertToHtml({arrayBuffer: arrayBuffer}, options).then(function(result) {
    // 应用自定义样式映射的结果
});

// 简化的协作编辑示例
const socket = new WebSocket('wss://yourserver.com/collaboration');
socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    if (data.type === 'content-update') {
        // 应用其他用户的编辑
        applyRemoteEdit(data.content, data.selection);
    }
};
// 监听本地编辑事件
document.getElementById('editor').addEventListener('input', function() {
    // 广播编辑内容
    socket.send(JSON.stringify({
        type: 'content-update',
        content: this.innerHTML,
        timestamp: Date.now()
    }));
});

方案	优点	缺点	适用场景
Blob 原生导出	零依赖、简单易用	样式控制有限、兼容性问题	简单文本导出、快速原型
mammoth.js 转换	语义化输出、良好可定制性	复杂格式可能丢失、需学习曲线	内容型文档、需要样式定制
docxtemplater	模板驱动、企业级控制	需要预设计模板、复杂度高	标准化报告、合同生成

const blob = new Blob(['\uFEFF' + htmlContent], { type: 'application/msword;charset=utf-8' });

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word 文档在线编辑器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; background-color: white; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); overflow: hidden; }
        header { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 20px 30px; text-align: center; }
        h1 { font-size: 2.2rem; margin-bottom: 10px; }
        .subtitle { font-size: 1rem; opacity: 0.9; }
        .toolbar { display: flex; justify-content: space-between; padding: 15px 30px; background-color: #f8f9fa; border-bottom: 1px solid #eaeaea; flex-wrap: wrap; }
        .toolbar-group { display: flex; gap: 10px; margin: 5px 0; }
        .btn { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
        .btn-primary { background-color: #4a6cf7; color: white; }
        .btn-primary:hover { background-color: #3a5ce0; transform: translateY(-2px); }
        .btn-success { background-color: #28a745; color: white; }
        .btn-success:hover { background-color: #218838; transform: translateY(-2px); }
        .format-btn { background-color: white; border: 1px solid #ddd; padding: 8px 12px; }
        .format-btn:hover { background-color: #f8f9fa; }
        .format-btn.active { background-color: #e9ecef; border-color: #6c757d; }
        .editor-container { display: flex; height: 70vh; min-height: 500px; }
        .upload-section { flex: 0 0 300px; padding: 20px; background-color: #f8f9fa; border-right: 1px solid #eaeaea; display: flex; flex-direction: column; gap: 20px; }
        .upload-area { border: 2px dashed #6a11cb; border-radius: 8px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s; background-color: rgba(106, 17, 203, 0.05); }
        .upload-area:hover { background-color: rgba(106, 17, 203, 0.1); }
        .upload-icon { font-size: 48px; color: #6a11cb; margin-bottom: 15px; }
        .file-input { display: none; }
        .editor-section { flex: 1; display: flex; flex-direction: column; }
        .editor-toolbar { padding: 10px 20px; background-color: white; border-bottom: 1px solid #eaeaea; display: flex; gap: 5px; flex-wrap: wrap; }
        #editor { flex: 1; padding: 30px; overflow-y: auto; background-color: white; line-height: 1.8; font-size: 16px; }
        #editor:focus { outline: none; }
        .status-bar { padding: 10px 30px; background-color: #f8f9fa; border-top: 1px solid #eaeaea; display: flex; justify-content: space-between; font-size: 0.9rem; color: #6c757d; }
        .message { padding: 15px; margin: 15px 30px; border-radius: 5px; display: none; }
        .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .loading { display: none; text-align: center; padding: 20px; }
        .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #6a11cb; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        @media(max-width: 768px) {
            .editor-container { flex-direction: column; height: auto; }
            .upload-section { flex: none; border-right: none; border-bottom: 1px solid #eaeaea; }
            .toolbar { flex-direction: column; gap: 10px; }
            .toolbar-group { justify-content: center; }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>Word 文档在线编辑器</h1>
        <p class="subtitle">上传、编辑并导出 Word 文档 - 基于 mammoth.js 与 Blob 对象实现</p>
    </header>
    <div class="toolbar">
        <div class="toolbar-group">
            <button class="btn btn-primary" id="uploadBtn"><i class="upload-icon">📤</i> 上传 Word 文档</button>
            <input type="file" id="fileInput" class="file-input" accept=".docx">
        </div>
        <div class="toolbar-group">
            <button class="btn btn-success" id="exportBtn"><i class="export-icon">📥</i> 导出为 Word 文档</button>
        </div>
    </div>
    <div class="message success" id="successMessage"></div>
    <div class="message error" id="errorMessage"></div>
    <div class="loading" id="loadingIndicator">
        <div class="spinner"></div>
        <p>正在处理文档，请稍候...</p>
    </div>
    <div class="editor-container">
        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📄</div>
                <h3>上传 Word 文档</h3>
                <p>点击此处或使用上方上传按钮</p>
                <p>支持.docx 格式文件</p>
            </div>
            <div>
                <h3>使用说明</h3>
                <ul style="padding-left: 20px; margin-top: 10px;">
                    <li>上传.docx 格式的 Word 文档</li>
                    <li>在编辑区域直接修改内容</li>
                    <li>使用工具栏格式化文本</li>
                    <li>完成后导出为新的 Word 文档</li>
                </ul>
            </div>
        </div>
        <div class="editor-section">
            <div class="editor-toolbar">
                <button class="format-btn" data-command="bold" title="加粗">B</button>
                <button class="format-btn" data-command="italic" title="斜体">I</button>
                <button class="format-btn" data-command="underline" title="下划线">U</button>
                <div style="width: 1px; background-color: #ddd; margin: 0 10px;"></div>
                <button class="format-btn" data-command="formatBlock" data-value="h1" title="标题 1">H1</button>
                <button class="format-btn" data-command="formatBlock" data-value="h2" title="标题 2">H2</button>
                <button class="format-btn" data-command="formatBlock" data-value="p" title="段落">P</button>
                <div style="width: 1px; background-color: #ddd; margin: 0 10px;"></div>
                <button class="format-btn" data-command="insertUnorderedList" title="无序列表">●</button>
                <button class="format-btn" data-command="insertOrderedList" title="有序列表">1.</button>
                <div style="width: 1px; background-color: #ddd; margin: 0 10px;"></div>
                <button class="format-btn" data-command="justifyLeft" title="左对齐">↶</button>
                <button class="format-btn" data-command="justifyCenter" title="居中对齐">↹</button>
                <button class="format-btn" data-command="justifyRight" title="右对齐">↷</button>
            </div>
            <div id="editor" contenteditable="true" style="border: 1px solid #ccc; min-height: 500px; padding: 20px;">
                <p>请上传 Word 文档开始编辑，或直接在此处输入内容...</p>
            </div>
        </div>
    </div>
    <div class="status-bar">
        <div id="charCount">字符数：0</div>
        <div id="docInfo">文档状态：未加载</div>
    </div>
</div>
<script>
// DOM 元素引用
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const uploadArea = document.getElementById('uploadArea');
const exportBtn = document.getElementById('exportBtn');
const editor = document.getElementById('editor');
const successMessage = document.getElementById('successMessage');
const errorMessage = document.getElementById('errorMessage');
const loadingIndicator = document.getElementById('loadingIndicator');
const charCount = document.getElementById('charCount');
const docInfo = document.getElementById('docInfo');

// 上传按钮点击事件
uploadBtn.addEventListener('click', () => fileInput.click());
uploadArea.addEventListener('click', () => fileInput.click());

// 文件选择变化事件
fileInput.addEventListener(, () {
     file = event..[];
     (!file) ;
    
     (!file..()) {
        (, );
        ;
    }
    
    ();
    
     reader =  ();
    reader. = () {
         arrayBuffer = e..;
        
        mammoth.({: arrayBuffer}).(() {
            
            editor. = result.;
            
            (file., result.);
            
            (, );
            
            ();
        }).(() {
            .(, error);
            ( + error., );
            ();
        });
    };
    reader. = () {
        (, );
        ();
    };
    reader.(file);
});


exportBtn.(, () {
    
     editedContent = editor.;
     (!editedContent || editedContent.() === ) {
        (, );
        ;
    }
    
    ();
    
     fullHtml = ;
    
     blob =  ([fullHtml], { :  });
    
     url = .(blob);
     a = .();
    a. = url;
    a. = ;
    ..(a);
    a.();
    
    ( {
        ..(a);
        .(url);
        ();
        (, );
    }, );
});


editor.(, updateCharCount);


.().( {
    button.(, () {
         command = ..;
         value = ..;
        
         (command ===  || command ===  || command === ) {
            ..();
        }
        
        .(command, , value);
        editor.();
    });
});


 () {
     messageElement = type ===  ? successMessage : errorMessage;
    messageElement. = text;
    messageElement.. = ;
    
    ( {
        messageElement.. = ;
    }, );
}


 () {
    loadingIndicator.. = show ?  : ;
}


 () {
     text = editor. || ;
    charCount. = ;
}


 () {
     text = content.(, );
    docInfo. = ;
}


();
</script>
</body>
</html>

前端实现 Word 文档在线编辑与导出：基于 mammoth.js 与 Blob 对象

前端实现 Word 文档在线编辑与导出

一、为什么选择 mammoth.js 与 Blob 方案？

二、实现原理与技术架构

2.1 mammoth.js 的转换原理

2.2 Blob 对象的作用

三、完整实现步骤

3.1 基础环境搭建

3.2 文档上传与转换

3.3 内容编辑与导出

四、高级功能与优化

4.1 样式映射定制

4.2 图片处理策略

4.3 实时协作支持（进阶）

五、方案对比与选择指南

六、常见问题与解决方案

6.1 中文乱码问题

6.2 样式不一致问题

6.3 大型文档性能优化

七、总结与最佳实践

完整实现代码示例

更多推荐文章

相关免费在线工具

前端实现 Word 文档在线编辑与导出：基于 mammoth.js 与 Blob 对象

前端实现 Word 文档在线编辑与导出

一、为什么选择 mammoth.js 与 Blob 方案？

二、实现原理与技术架构

2.1 mammoth.js 的转换原理

2.2 Blob 对象的作用

三、完整实现步骤

3.1 基础环境搭建

3.2 文档上传与转换

3.3 内容编辑与导出

四、高级功能与优化

4.1 样式映射定制

4.2 图片处理策略

4.3 实时协作支持（进阶）

五、方案对比与选择指南

六、常见问题与解决方案

6.1 中文乱码问题

6.2 样式不一致问题

6.3 大型文档性能优化

七、总结与最佳实践

完整实现代码示例

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具