如何基于React JS将SRT/TXT文件转换为有效的DOCX文件

兄弟，直接改扩展名肯定不行的——DOCX可不是单纯的文本文件，它本质是个ZIP压缩包，里面包含了一堆定义文档结构的XML文件，纯文本改个名Office肯定不认。我之前在React项目里做过类似的转换，给你分享下靠谱的实现方法：

核心思路 #

DOCX有严格的格式规范，必须把SRT/TXT的纯文本内容重新构建成符合DOCX结构的文档对象，再生成合法的DOCX文件，而不是改个文件名了事。

具体实现步骤（React环境） #

我推荐用docx这个npm库，它是专门用来在JS/TS里生成DOCX文档的，API很友好，踩坑少。

1. 安装依赖

先装核心库：

npm install docx
# 或者用yarn
yarn add docx

如果是处理SRT文件，还可以装个解析库简化字幕解析工作：

npm install srt-parser-2

2. 读取用户上传的文件

在React里用FileReader获取文件的纯文本内容：

const handleFileUpload = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const textContent = event.target.result;
    // 根据文件类型选择转换逻辑
    const fileType = file.name.split('.').pop().toLowerCase();
    if (fileType === 'srt') {
      generateDocxFromSrt(textContent, file.name.split('.')[0]);
    } else {
      generateDocxFromTxt(textContent, file.name.split('.')[0]);
    }
  };
  reader.readAsText(file);
};

3. 把文本内容转换成DOCX结构

• 如果是TXT文件：直接按行分割成段落即可

import { Document, Packer, Paragraph } from 'docx';

const generateDocxFromTxt = (textContent, fileName) => {
  // 把文本按换行分割成独立段落
  const paragraphs = textContent.split('\n').map(line => new Paragraph(line));
  
  // 创建DOCX文档对象
  const doc = new Document({
    sections: [
      {
        children: paragraphs,
      },
    ],
  });

  // 生成Blob并触发下载
  Packer.toBlob(doc).then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${fileName}.docx`;
    a.click();
    URL.revokeObjectURL(url);
  });
};

• 如果是SRT文件：先解析字幕的时间轴和内容，再组织成带格式的段落

import { Document, Packer, Paragraph, TextRun } from 'docx';
import SrtParser from 'srt-parser-2';

const generateDocxFromSrt = (srtContent, fileName) => {
  const parser = new SrtParser();
  // 解析SRT成结构化数据（包含序号、开始/结束时间、字幕内容）
  const subtitles = parser.fromSrt(srtContent);
  
  const paragraphs = subtitles.map(sub => {
    // 把时间戳设为灰色，和字幕内容区分开
    return new Paragraph({
      children: [
        new TextRun({
          text: `${sub.startTime} → ${sub.endTime}: `,
          color: '808080',
        }),
        new TextRun(sub.text),
      ],
    });
  });

  const doc = new Document({
    sections: [
      {
        children: paragraphs,
      },
    ],
  });

  // 下载逻辑和TXT转换一致
  Packer.toBlob(doc).then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${fileName}.docx`;
    a.click();
    URL.revokeObjectURL(url);
  });
};

4. 绑定上传组件

在React组件里加个文件上传输入框就行：

return (
  <div>
    <input type="file" accept=".txt,.srt" onChange={handleFileUpload} />
  </div>
);

关于文件属性的问题 #

完全不需要修改原SRT/TXT的文件属性！你要做的是读取原文件的文本内容，然后基于这些内容生成一个全新的、符合DOCX格式规范的文件——原文件的属性和新生成的DOCX没有关系，重点是内容的重新组织。

额外提醒 #

• 如果需要更复杂的DOCX格式（比如标题、加粗、列表、自定义字体），docx库都支持，你可以去看它的官方文档扩展功能。
• 对于超大文件，建议加个加载提示，但一般的SRT/TXT文件都能轻松处理。

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