0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@rafluctua

React で JavaScript を使用して Word を PDF に変換する

0
Last updated at Posted at 2026-07-07

React プロジェクトで Word を PDF に変換することは、ドキュメント管理システム、電子契約書の署名、レポート生成などのシーンで一般的な要件です。
バックエンドサービスに依存せず、ブラウザ側（クライアント側）で直接変換できることには大きな利点があります。
🟢 ファイルをサーバーにアップロードする必要がないため、帯域幅の消費とサーバーの負荷が軽減されるだけでなく、転送中にドキュメントの内容が漏洩するリスクも回避でき、データプライバシー要件が特に厳しい業務に適しています。

本稿では、Spire.Doc for JavaScript ライブラリに基づいて、React でこの機能を実装する方法を体系的に紹介します。環境構築から始め、フォント埋め込み、権限暗号化、ブックマーク保持などの高度な設定まで段階的に説明し、完全な実行可能なサンプルを提供します。

1️ 技術原理の概要：WebAssembly と仮想ファイルシステム

コードを書き始める前に、その基盤となるメカニズムを簡単に理解しておくことが重要です。
Spire.Doc for JavaScript の中核は WASM（WebAssembly）モジュールであり、このモジュールは完全なドキュメント処理エンジンをブラウザで直接実行可能なバイナリコードにコンパイルし、ブラウザ環境で高性能な Word ドキュメントの読み書きおよび変換機能を実現します。

🔍 注目すべき点として、WASM は独立したサンドボックス環境で動作するため、コンピュータのハードディスク上のファイルを直接読み書きすることはできません。
そのため、このライブラリは**仮想ファイルシステム（VFS、Virtual File System）**を実装しています。コード内で見られる FetchFileToVFS、FS.readFile などの操作は、すべてこの仮想ファイルシステムを中心に実行されます。

  • 📥 VFS への書き込み：FetchFileToVFS を使用して、public ディレクトリ配下の静的リソース（フォントファイル、テンプレートドキュメント）を WASM メモリに読み込みます。
  • 📄 ドキュメントの処理：Document オブジェクトが VFS からソースファイルを読み取り、変換処理を実行し、結果を VFS に出力します。
  • 📤 VFS からの読み取り：変換完了後、FS.readFile を使用して VFS から生成された PDF のバイナリデータを読み取り、ブラウザの API を介してダウンロードをトリガーします。

この流れを理解しておくと、以降のコードがすんなり読めるようになります。

2️⃣ プロジェクトの初期化と環境設定

Node.js のインストールと React プロジェクトの作成

まず、Node.js 公式サイト から Node.js をダウンロードしてインストールします。
インストール完了後、ターミナルで以下のコマンドを実行してインストールが成功したことを確認します。

node -v
npm -v

次に、新しい React プロジェクトを作成します（Create React App を使用する例）：

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

依存パッケージのインストール

Spire.Office for JavaScript は、Spire.Doc、Spire.XLS、Spire.PDF、Spire.Presentation の 4 つのコアコンポーネントを統合しています。
プロジェクトのルートディレクトリで以下のコマンドを実行してインストールします。

npm i spire.office

コアランタイムファイルの移動

インストール完了後、lib 内の以下の 5 つのファイルおよびフォルダを React プロジェクトの public フォルダにコピーする必要があります。

  • spire.doc.js
  • Spire.Doc.Wasm.zip
  • spire.common.js
  • Spire.Common.Wasm.zip
  • _framework フォルダ

❓ なぜ public に配置するのか？
WASM の読み込みは、JavaScript のメインスレッドが非同期で .wasm ファイルおよび関連リソースをリクエストする必要があるためです。
public ディレクトリに配置することで、ビルドツール（Webpack など）が誤って処理したり名前を変更したりすることを防ぎ、process.env.PUBLIC_URL で正確にアクセスできるようになります。

フォントリソースの準備（⚠️ 重要な手順）

ブラウザと WASM 環境にはデフォルトでシステムフォントが含まれていません。
変換対象の Word ドキュメントで特殊なフォント（Calibri、Times New Roman、または中国語フォントなど）が使用されている場合、VFS にそのフォントが存在しないと、変換後の PDF で文字化けやテキストの位置ずれが発生する可能性があります。

💡 プロジェクトでよく使用するフォント（CALIBRI.ttf、MSYH.TTC など）も合わせて public ディレクトリに配置することをお勧めします。
後のコードで FetchFileToVFS を使用してこれらのフォントを VFS にプリロードします。
public.png

3️⃣ 基本変換：Word から PDF へ

以下は、フォントと Word ファイルの読み込みから PDF の生成、ブラウザダウンロードのトリガーまでの完全なフローを実装した変換サンプルです。

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 || '';
        const spireModule = await import(
          /* webpackIgnore: true */
          `${publicUrl}/spire.doc.js`
        );
        const rawModule = spireModule.default || spireModule;
        // 直接初期化し、不要な変数は保存しない
        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' }}>
    <h1>React フロントエンド Word → PDF 変換サンプル</h1>
    <button onClick={convertWordToPdf}>変換</button>
  </div>
);
}

export default App;

上記のコーディングが完了したら、プロジェクトのルートディレクトリで以下を実行します。

npm start

デフォルトでローカル開発サーバー（アドレスは http://localhost:3000）が起動します。
ページが読み込まれると WASM モジュールが自動的に初期化され、変換ボタンがクリック可能になると、クリックすることで Word から PDF への変換が開始され、変換完了後にブラウザが自動的に生成された PDF ファイルをダウンロードします。
ReactWord2PDF.png

4️⃣ 高度な変換パラメータの詳細（ToPdfParameterList）

基本変換はシンプルな要件を満たすだけです。より複雑なビジネスシーンに対応するため、Spire.Doc は ToPdfParameterList パラメータクラスを提供しており、変換プロセスを細かく制御できます。

1. フォント問題の完全解決：全フォントの埋め込み

デフォルトでは、PDF はシステムフォントを参照します。対象の閲覧デバイスに対応するフォントが存在しない場合、表示がフォールバックされます。
IsEmbeddedAllFonts を true に設定すると、ドキュメントで使用されているすべての文字のアウトラインを PDF に埋め込み、「WYSIWYG（What You See Is What You Get）」を実現できます。

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

  // フォントとファイルを VFS に読み込む
  await window.spire.FetchFileToVFS('CALIBRI.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
  await window.spire.FetchFileToVFS('Data.docx', '', `${process.env.PUBLIC_URL}/`);

  const doc = new wasmModule.Document();
  doc.LoadFromFile('Data.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();
};

2. 機密コンテンツの保護：PDF 暗号化と権限制御

契約書や入札書類などの機密ドキュメントでは、暗号化が極めて重要です。
PdfSecurity.Encrypt メソッドは 4 つのコアパラメータを受け取ります。

  • 🔑 オープンパスワード：ユーザーが PDF を開く際に入力必須のパスワード。
  • 🛡️ 権限パスワード：権限設定を変更するための管理者パスワード（オープンパスワードとは異なる）。
  • 📋 権限フラグ：印刷、コンテンツのコピー、ドキュメントの変更などを許可するかどうかを制御。
  • 🔒 暗号化強度：通常は 128 ビットキー（Key128Bit）を選択。
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
  });

  // ... ダウンロードおよびリソース解放
};

3. 長文ドキュメントの体験最適化：ブックマーク（目次ナビゲーション）の保持

Word ドキュメントで見出しスタイル（Heading 1/2/3）を使用してブックマークが追加されている場合、CreateWordBookmarks = true を設定することで、生成された PDF の左側にナビゲーション目次ツリーを生成でき、長文ドキュメントの閲覧効率が大幅に向上します。

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

  // ... ダウンロードおよびリソース解放
};

5️⃣ まとめ

本稿では、React エコシステムにおいて WebAssembly 技術を活用してクライアントサイドで Word を PDF に変換する完全な手順を詳しく紹介しました。
Spire.Office for JavaScript を使用することで、バックエンドでのファイル処理のボトルネックを回避できるだけでなく、仮想ファイルシステムと詳細なパラメータ設定を利用して、フォント埋め込み、ドキュメント暗号化、ブックマーク保持などのエンタープライズ向けの機能を実現できます。

ぜひお試しいただき、快適な開発体験をお楽しみください！😊

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?