使用JavaScript在React中实现Word转PDF功能

node -v
npm -v

npx create-react-app my-app
cd my-app

npm i spire.office

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  // 组件挂载时加载 WASM 模块
  useEffect(() => {
    const loadWasm = async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        // 动态导入 spire.doc.js（从 public 目录加载）
        const spireModule = await import(
          /* webpackIgnore: true */ `${publicUrl}/spire.doc.js`
        );
        const rawModule = spireModule.default || spireModule;
        // 初始化 WASM 模块，locateFile 用于指定 .wasm 文件位置
        const module = await rawModule({
          locateFile: (p) =>
            p.endsWith('.wasm') ? `${publicUrl}/${p}` : p,
        });
        // 模块初始化完成后暴露在 window.spire 下
        setWasmModule(window.spire);
      } catch (error) {
        console.error('Failed to load WASM module:', error);
      }
    };

    loadWasm();
  }, []);

  const convertWordToPdf = async () => {
    if (!wasmModule) {
      alert('文档处理引擎尚未加载完成，请稍候');
      return;
    }

    // 1. 加载字体到虚拟文件系统（VFS）
    await window.spire.FetchFileToVFS(
      'CALIBRI.ttf',
      '/Library/Fonts/',
      `${process.env.PUBLIC_URL}/`
    );

    // 2. 加载待转换的 Word 文件到 VFS
    const inputFileName = 'Roche.docx';
    await window.spire.FetchFileToVFS(
      inputFileName,
      '',
      `${process.env.PUBLIC_URL}/`
    );

    // 3. 创建文档对象并加载 Word 文件
    const doc = new wasmModule.Document();
    doc.LoadFromFile(inputFileName);

    // 4. 转换为 PDF
    const outputFileName = 'ToPDF.pdf';
    doc.SaveToFile({
      fileName: outputFileName,
      fileFormat: wasmModule.FileFormat.PDF,
    });

    // 5. 从 VFS 读取生成的 PDF 并触发下载
    const fileArray = wasmModule.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    // 6. 释放资源
    doc.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Word 转 PDF 示例</h1>
      <button onClick={convertWordToPdf} disabled={!wasmModule}>
        转换
      </button>
    </div>
  );
}

export default App;

const convertWithFonts = async () => {
  if (!wasmModule) return;

  // 加载字体和文件到 VFS
  await window.spire.FetchFileToVFS('CALIBRI.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
  await window.spire.FetchFileToVFS('Roche.docx', '', `${process.env.PUBLIC_URL}/`);

  const doc = new wasmModule.Document();
  doc.LoadFromFile('Roche.docx');

  // 创建转换参数对象
  let parameters = new wasmModule.ToPdfParameterList();

  // 嵌入所有字体
  parameters.IsEmbeddedAllFonts = true;

  // 针对某些特殊私有字体，还可以单独指定路径
  const privateFont = wasmModule.PrivateFontPath.Create('MyCustomFont', 'custom.ttf');
  parameters.PrivateFontPaths = [privateFont];

  const outputFileName = 'ToPDF_with_Fonts.pdf';
  doc.SaveToFile({ fileName: outputFileName, paramList: parameters });

  // ... 读取并下载逻辑同上
  doc.Dispose();
};

const convertWithEncryption = async () => {
  // ... 加载字体和文件 ...

  let parameters = new wasmModule.ToPdfParameterList();

  // 加密 PDF
  parameters.PdfSecurity.Encrypt(
    'user123',                                    // 用户打开密码
    'admin456',                                   // 所有者权限密码
    wasmModule.PdfPermissionsFlags.Print | wasmModule.PdfPermissionsFlags.Copy, // 仅允许打印和复制
    wasmModule.PdfEncryptionKeySize.Key128Bit     // 128 位加密强度
  );

  const outputFileName = 'ToPDF_Encrypted.pdf';
  doc.SaveToFile({ fileName: outputFileName, paramList: parameters });

  // ... 下载及资源释放
};

const convertWithBookmarks = async () => {
  // ... 加载字体和文件 ...

  let parameters = new wasmModule.ToPdfParameterList();

  // 从 Word 标题创建 PDF 书签
  parameters.CreateWordBookmarks = true;

  const outputFileName = 'ToPDF_with_Bookmarks.pdf';
  doc.SaveToFile({ fileName: outputFileName, paramList: parameters });

  // ... 下载及资源释放
};