如何在React JS中实现Word文档生成并转存PDF？（含加载报错）

你当前的代码是通过data:application/vnd.ms-word协议将文本/HTML内容编码为伪Word文件，本质只是文本内容的编码包装，并非标准的Word二进制格式。直接修改文件后缀为PDF会导致格式完全不匹配，因此出现“Failed to load PDF document”错误。以下是几种可行的解决方案：

方案1：直接从HTML/文本生成PDF（无需Word中转） #

如果你的业务场景可以跳过Word编辑环节，直接从目标内容生成PDF，推荐使用html2pdf.js，它能直接将HTML元素转换为标准PDF文件：

1. 安装依赖：

npm install html2pdf.js

2. React组件内实现代码：

import html2pdf from 'html2pdf.js';

const exportToPDF = () => {
  // 替换为你的实际内容（HTML格式）
  const content = `
    <div style="padding: 1rem;">
      <h2>业务报告</h2>
      <p>这是通过html2pdf生成的PDF文档内容</p>
      <ul>
        <li>数据项1</li>
        <li>数据项2</li>
      </ul>
    </div>
  `;
  const container = document.createElement('div');
  container.innerHTML = content;

  // 配置PDF参数
  const options = {
    margin: 0.5,
    filename: 'business-report.pdf',
    html2canvas: { scale: 2 },
    jsPDF: { format: 'a4', orientation: 'portrait' }
  };

  // 生成并下载PDF
  html2pdf().set(options).from(container).save();
};

// 在组件中通过按钮触发：<button onClick={exportToPDF}>导出PDF</button>

方案2：Word内容转PDF（需处理Word格式） #

如果必须基于Word文档内容转换，需要先将Word解析为可处理的格式（如HTML），再生成PDF。这里用mammoth解析Word，pdfmake生成PDF：

1. 安装依赖：

npm install mammoth pdfmake

2. React组件内实现代码：

import mammoth from 'mammoth';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

// 加载pdfmake所需字体
pdfMake.vfs = pdfFonts.pdfMake.vfs;

const convertWordToPDF = async (wordFile) => {
  // 假设wordFile是用户上传的Word文件对象，或Base64/ArrayBuffer格式的Word内容
  const arrayBuffer = await wordFile.arrayBuffer();
  // 将Word转换为HTML
  const result = await mammoth.convertToHtml({ arrayBuffer });
  const htmlContent = result.value;

  // 简单将HTML转为pdfmake支持的文本（复杂HTML需用html-to-pdfmake库做更完整转换）
  const plainText = htmlContent.replace(/<[^>]+>/g, '');
  const docDefinition = {
    content: [
      { text: plainText, lineHeight: 1.5 }
    ],
    defaultStyle: {
      fontSize: 12
    }
  };

  // 生成并下载PDF
  pdfMake.createPdf(docDefinition).download('converted-document.pdf');
};

// 使用示例：处理上传的Word文件
// <input type="file" accept=".docx" onChange={(e) => convertWordToPDF(e.target.files[0])} />

方案3：在线编辑Word后导出PDF #

如果需要实现在线编辑Word文档再导出的功能，可选择以下两种方式：

• Office.js集成：嵌入Office Web Apps到React页面，通过Office.js API加载、编辑Word文档，完成后调用导出PDF接口。此方案需依赖Office 365服务，适合企业级场景。
• 第三方富文本编辑器：使用支持Word导入/导出的编辑器（如CKEditor 5的Word处理插件），将Word内容导入编辑器编辑完成后，直接导出为PDF。

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