在 JavaScript 中将 Word 转换为 PDF（完整指南）

原创

用户12495000

发布于 2026-07-29 09:44:57

1520

在现代 Web 应用中，文档处理功能越来越成为刚需。无论是生成报告、导出合同还是处理用户上传的文档，Word 转 PDF 都是最常见的需求之一。本文将深入探讨如何使用 Spire.Doc for JavaScript 库，在 React 应用中实现 Word 到 PDF 的高质量转换。

为什么选择 Spire.Doc for JavaScript？

在前端进行文档转换有很多选择，但 Spire.Doc for JavaScript 有几个突出优势：

无需后端服务器 ：所有转换在客户端完成，保护用户数据隐私
高质量渲染 ：完美保留原文档的格式、字体和布局
丰富的功能支持 ：不仅支持转换，还支持创建、编辑和操作 Word 文档
跨平台兼容 ：基于 WebAssembly，在主流浏览器中运行流畅

项目初始化

首先，在您的 React 项目中安装 Spire.Office：

npm i spire.office

核心实现解析

1. 加载 WASM 模块

Spire.Doc 基于 WebAssembly 运行，需要先加载核心模块。这里使用 React 的 useEffect 在组件挂载时异步加载：

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);
    }
  })();
}, []);

关键点解析：

webpackIgnore: true 确保 webpack 不处理这个动态导入，避免资源路径错误
locateFile 函数指定 WASM 文件的加载路径
模块加载成功后存入 state，控制按钮的可用状态

2. 字体管理

字体是文档转换中最容易出问题的环节。Spire.Doc 需要将字体文件加载到虚拟文件系统（VFS）中，以确保 PDF 正确显示：

// 加载 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/`);

最佳实践：

将常用字体文件放在 public/static/font/ 目录下
根据文档实际使用的字体，有选择地加载，减少加载时间
对于中文文档，需要加载中文字体（如 SimSun、SimHei 等）

3. 文档转换核心流程

完整的转换流程包含以下步骤：

// 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' });

4. 文件下载与资源清理

生成 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();  // 释放文档对象

完整组件示例

将以上所有步骤整合，就得到了完整的 React 组件：

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;

性能优化建议

字体缓存 ：将常用字体缓存到 IndexedDB，避免重复加载
进度提示 ：大文件转换时，使用加载动画或进度条提升用户体验
错误处理 ：完善的 try-catch 和用户友好的错误提示
内存管理 ：转换完成后及时调用 Dispose() 释放资源

常见问题与解决方案

Q: 转换后的 PDF 中文显示为乱码？ A: 确保加载了对应的中文字体文件，并在转换参数中设置 IsEmbeddedAllFonts = true。

Q: WASM 模块加载失败？ A: 检查 public 目录下是否存在 spire.doc.js 和 spire.doc.wasm 文件，确保路径配置正确。

Q: 转换大文件时浏览器卡顿？ A: 可以使用 Web Worker 将转换任务移到后台线程执行。

总结

通过 Spire.Doc for JavaScript，我们能够在纯前端环境中实现专业级的 Word 到 PDF 转换。本文提供的方案不仅代码简洁，而且包含了字体管理、错误处理、资源清理等最佳实践，可直接应用于生产环境。

这种客户端转换方案特别适合：

需要保护数据隐私的企业应用
离线优先的 Web 应用
希望降低服务器负载的场景

希望本文能帮助您在项目中顺利实现文档转换功能。如果您有任何问题或建议，欢迎在评论区讨论！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

ms-word