React应用中能否使用Pandoc？遇fs/child_process模块缺失错误求助

问题根源 #

你碰到的fs和child_process模块找不到的错误，核心原因是node-pandoc依赖Node.js专属的核心模块，但React应用运行在浏览器环境中——浏览器不支持文件系统操作、子进程创建这类服务端API，自然无法解析这些模块。

可行解决方案 #

方案1：后端API处理转换逻辑 #

把Pandoc转换逻辑移到Node.js后端（比如Express服务），前端通过API请求传递文件，后端完成转换后返回结果：

1. 搭建简易Express服务：

const express = require('express');
const nodePandoc = require('node-pandoc');
const multer = require('multer'); // 处理文件上传
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/convert', upload.single('docx'), (req, res) => {
  const src = req.file.path;
  const args = '-f docx -t markdown';
  
  nodePandoc(src, args, (err, result) => {
    if (err) {
      console.error(err);
      return res.status(500).send('转换失败');
    }
    res.send(result);
  });
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

2. React前端修改为上传文件并调用API：

import './App.css';
import { useState } from 'react';

function App() {
  const [file, setFile] = useState(null);
  const [markdown, setMarkdown] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleConvert = async () => {
    if (!file) return;
    const formData = new FormData();
    formData.append('docx', file);
    
    const response = await fetch('http://localhost:3001/convert', {
      method: 'POST',
      body: formData
    });
    const result = await response.text();
    setMarkdown(result);
  };

  return (
    <div className="App">
      <h1>文档转换工具</h1>
      <input type="file" accept=".docx" onChange={handleFileChange} />
      <button onClick={handleConvert}>转换为Markdown</button>
      <pre>{markdown}</pre>
    </div>
  );
}

export default App;

方案2：使用纯前端兼容的转换库 #

如果不想搭建后端，可以用浏览器端原生支持的文档转换库替代，比如：

• mammoth.js：专注于将docx转换为HTML/Markdown，完全在前端运行，无需依赖Pandoc
• 若需其他格式转换，可搭配showdown这类纯前端Markdown工具

示例：用mammoth.js实现docx转Markdown

import './App.css';
import { useState } from 'react';
import mammoth from 'mammoth';

function App() {
  const [file, setFile] = useState(null);
  const [markdown, setMarkdown] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleConvert = async () => {
    if (!file) return;
    const arrayBuffer = await file.arrayBuffer();
    const result = await mammoth.convertToMarkdown({ arrayBuffer });
    setMarkdown(result.value);
  };

  return (
    <div className="App">
      <h1>Docx转Markdown</h1>
      <input type="file" accept=".docx" onChange={handleFileChange} />
      <button onClick={handleConvert}>转换</button>
      <pre>{markdown}</pre>
    </div>
  );
}

export default App;

关键提醒 #

• 若一定要用原生Pandoc，必须在服务端执行，浏览器环境无法直接调用Node.js模块和系统级Pandoc命令
• 纯前端库的转换能力可能不如原生Pandoc全面，但能覆盖多数基础需求

内容的提问来源于stack exchange，提问作者André Pinto