JavaScript前端实现将Word转换为PDF(附完整代码)

npm i spire.office

useEffect(() => {
  (async () => {
    try {
      const publicUrl = process.env.PUBLIC_URL || '';
      const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);
      const rawModule = spireModule.default || spireModule;
      window.wasmModule = typeof rawModule === 'function'
        ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
        : rawModule;
      setWasmModule(window.wasmModule);
    } catch (error) {
      console.error('Failed to load spire.doc.js WASM module:', error);
    }
  })();
}, []);

// 加载 Times New Roman 系列字体
await window.spire.FetchFileToVFS('times.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
await window.spire.FetchFileToVFS('timesbd.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
await window.spire.FetchFileToVFS('timesbi.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);
await window.spire.FetchFileToVFS('timesi.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

// 1. 加载 Word 文档到 VFS
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 2. 创建 Document 实例并加载文档
const doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 3. 配置转换参数
let parameters = new wasmModule.ToPdfParameterList();
parameters.IsEmbeddedAllFonts = true;  // 嵌入所有字体，确保跨设备显示一致
// 4. 执行转换并保存
const outputFileName = 'ToPDF.pdf';
doc.SaveToFile({ fileName: outputFileName, paramList: parameters });
// 5. 读取生成的文件
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/pdf' });

// 创建下载
const url = URL.createObjectURL(modifiedFile);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
// 清理资源
document.body.removeChild(a);
URL.revokeObjectURL(url);
doc.Dispose();  // 释放文档对象

import React, { useState, useEffect } from 'react';
function App() {
  const [wasmModule, setWasmModule] = useState(null);
  useEffect(() => {
    // WASM 加载逻辑...
  }, []);
  const convertWordToPdf = async () => {
    // 转换逻辑...
  };
  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Word to PDF Using JavaScript in React</h1>
      <button onClick={convertWordToPdf} disabled={!wasmModule}>
        Generate
      </button>
    </div>
  );
}
export default App;