求推荐可在React中使用的JavaScript Docx文档编辑工具/库

实现思路 #

使用docxtemplater（处理DOCX模板替换，保留原格式）、pizzip（解析DOCX压缩结构）、file-saver（浏览器端下载）这几个库，实现上传DOCX模板、替换内容、下载新文档的流程。

步骤1：安装依赖 #

在项目中执行以下命令安装所需包：

npm install docxtemplater pizzip file-saver pizzip-utils

步骤2：编写React组件 #

下面是完整的功能组件，包含文件上传、内容输入、编辑下载三个核心功能：

import React, { useState } from 'react';
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import PizZipUtils from 'pizzip/utils/index.js';
import { saveAs } from 'file-saver';

function DocxEditor() {
  const [uploadedFile, setUploadedFile] = useState(null);
  const [editText, setEditText] = useState('');

  // 读取文件二进制内容
  const loadFile = (url, callback) => {
    PizZipUtils.getBinaryContent(url, callback);
  };

  // 处理DOCX文件上传
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
      setUploadedFile(file);
    } else {
      alert('请上传有效的DOCX文件');
    }
  };

  // 执行编辑并触发下载
  const handleEditAndDownload = () => {
    if (!uploadedFile) {
      alert('请先上传DOCX文件');
      return;
    }
    if (!editText.trim()) {
      alert('请输入要替换的内容');
      return;
    }

    loadFile(URL.createObjectURL(uploadedFile), (error, content) => {
      if (error) throw error;

      const zip = new PizZip(content);
      const doc = new Docxtemplater(zip, {
        paragraphLoop: true,
        linebreaks: true,
      });

      // 替换模板中的占位符（需提前在DOCX中设置{{content}}这类标记）
      doc.render({
        content: editText,
      });

      // 生成新的DOCX Blob
      const outputBlob = doc.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });

      // 下载文件
      saveAs(outputBlob, '编辑后的文档.docx');
    });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>上传DOCX模板</label>
        <input
          type="file"
          accept=".docx"
          onChange={handleFileUpload}
        />
      </div>
      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>输入替换内容</label>
        <textarea
          value={editText}
          onChange={(e) => setEditText(e.target.value)}
          rows={6}
          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
          placeholder="输入要替换到DOCX中的内容..."
        />
      </div>
      <button
        onClick={handleEditAndDownload}
        disabled={!uploadedFile || !editText.trim()}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          opacity: !uploadedFile || !editText.trim() ? 0.6 : 1
        }}
      >
        编辑并下载文档
      </button>
    </div>
  );
}

export default DocxEditor;

关键说明 #

1. 模板设置：上传的DOCX文件需要预先添加占位符，比如{{content}}，代码会将这个标记替换为文本框输入的内容。如果需要多字段替换，只需扩展doc.render()中的对象（例如{title: '文档标题', content: '主体内容'}）。
2. 格式保留：docxtemplater会完全保留原DOCX的格式（字体、段落样式、表格等），只替换指定占位符内容。
3. 文件验证：上传时校验文件类型，下载前检查是否已上传文件和输入有效内容，避免无效操作。

扩展功能提示 #

如果需要更复杂的编辑操作（比如修改特定段落、插入图片/表格、循环生成内容），可以参考docxtemplater的进阶特性，它支持条件判断、循环渲染、媒体插入等功能。

内容的提问来源于stack exchange，提问作者Evgeniy Pivovarov