フロントエンド向けWord→TXT変換器をどう構築するか？JavaScript + WebAssemblyをベースに

Posted at 2026-11-06

はじめに：従来のWordからテキストへの変換は、多くの場合、バックエンドサービス、Office COMコンポーネント、オンライン変換APIに依存しており、デプロイコストが高い、ファイルが外部に送信される、同時実行数が制限されるといった問題があります。WebAssembly版のドキュメント処理ライブラリを活用すれば、.docx から .txt への変換を完全にフロントエンドのブラウザ内で完結でき、バックエンドを経由する必要がなくなり、ドキュメントデータがローカルの外に流出しないことを保証できます。本記事では React + Spire.Doc for JavaScript をベースに、実行可能な変換ソリューションを示し、実装の詳細を分解して説明します。

ソリューション概要

本ソリューションの主な機能：

✅ 純フロントエンド実行：ドキュメントの解析と形式変換のロジックはすべてブラウザのWASM環境で動作します
✅ ファイルをサーバーにアップロードする必要がない：ドキュメントは一貫してユーザーのローカルメモリと仮想ファイルシステム（VFS）内で処理されます
✅ 標準TXTを出力：Wordの本文内容を抽出し、リッチテキストのスタイル、画像、レイアウト情報を除去してプレーンテキストを生成します
✅ リソースを自動解放：ドキュメントオブジェクトを明示的に解放し、WASMメモリのリークが続くのを防ぎます

依存関係について：サンプルは Spire.Doc for JavaScript WebAssembly モジュールに基づいており、ページ初期化時に wasmModule、spire、dotnetRuntime がマウント済みであることを前提としています。React SPAプロジェクトに適しています。

完全なサンプルコード

function App() {
  const WordToTxt = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // Load the sample file into VFS
    let inputFileName = "WordToTxt.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/static/data/`);

    // Create a document instance
    const doc = new docModule.Document();

    // Load the document from the virtual file system
    doc.LoadFromFile(inputFileName);

    // Define the output file name
    const outputFileName = "WordToTxt-result.txt";

    // Save the document as plain text
    doc.SaveToFile({fileName: outputFileName, fileFormat: docModule.FileFormat.Txt});

    // Release resources
    doc.Dispose();

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Word To TXT</h1>
      <button onClick={WordToTxt}>Generate</button>
    </div>
  );
}
export default App;

コードの段落ごとの解説

1. 事前のモジュールチェック

const docModule = window.wasmModule?.spiredoc;
if (!docModule) {
  alert('Spire.Doc is not ready yet');
  return;
}

WASMモジュールの読み込みは非同期処理であるため、ページのレンダリング完了時点で準備ができているとは限りません。ここではガードチェックを行い、ドキュメントモジュールがまだ初期化されていない場合はアラートを表示して、以降の呼び出しでエラーが発生するのを防ぎます。実際のプロジェクトでは、単純な alert ではなく、ローディング状態やプログレスバーを追加することを推奨します。

2. ローカルのリソースファイルをWASM仮想ファイルシステム（VFS）に読み込む

let inputFileName = "WordToTxt.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/static/data/`);

WASM実行環境は独自の仮想ファイルシステムを持っており、ブラウザの public ディレクトリにあるリソースを直接読み取ることはできません。FetchFileToVFS は、fetch で静的ディレクトリ内のdocxファイルを取得してVFSに書き込み、WASM側のAPIから読み取れるようにする役割を担います。

補足：ユーザーが任意のWordファイルをアップロードできるようにする必要がある場合は、固定のサンプルファイルを取得する代わりにFileReaderを使い、ユーザーが選択したFileオブジェクトをVFSに書き込む方法に変更できます。

3. ドキュメントを読み込んで形式変換を実行

const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);

const outputFileName = "WordToTxt-result.txt";
doc.SaveToFile({fileName: outputFileName, fileFormat: docModule.FileFormat.Txt});

new Document()：ドキュメントオブジェクトをインスタンス化します
LoadFromFile：仮想ファイルシステムからdocxを読み込みます
SaveToFile：中心となる変換APIです。出力形式を Txt に指定すると、エンジンが段落とテキストを自動解析し、フォント、色、表のスタイル、埋め込みオブジェクトなどのリッチテキスト情報を破棄して、テキスト内容だけを保持します。

4. ドキュメントリソースを解放（非常に重要）

doc.Dispose();

WASMのメモリはJS GCだけでは完全に管理されず、ドキュメントオブジェクトが占有するネイティブメモリは、JSオブジェクトのガベージコレクションに伴って自動解放されるわけではありません。明示的に Dispose を呼び出す必要があります。長期間にわたって変換を繰り返す場面でこの手順を省略すると、メモリ使用量が増え続け、最終的にページの動作が重くなったりクラッシュしたりします。

5. VFS上の出力ファイルを読み取り、ブラウザのダウンロードを開始

const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);

変換後のTXTファイルはWASMのFSに保存されるため、JS側で FS.readFile を呼び出してバイト配列を取得し、それを Blob にラップします。その後、動的に <a> タグを生成することで、ブラウザからダウンロードできるようにします。

発展的な改造：ユーザーが任意のWordファイルをアップロードできるようにする

上記のサンプルは固定の静的ファイルを読み取るものですが、実際の業務ではユーザーにファイルをアップロードさせるケースの方が一般的です。簡単な改造方針は次のとおりです。

ページに <input type="file" accept=".docx"/> を追加する
FileReader.readAsArrayBuffer でユーザーが選択したファイルを読み取る
バイナリ配列をVFSに書き込む
以降の読み込み・変換・エクスポート処理を再利用する

これにより、public ディレクトリに事前配置したサンプルドキュメントだけに限定されなくなります。

まとめ

WebAssemblyを活用することで、JavaScriptだけでもブラウザ内でWordからTXTへの変換を完結できます。この手法はドキュメント解析機能をフロントエンド側に移し、ファイルアップロードの経路を不要にするため、データの秘匿性が求められるドキュメントテキスト抽出の場面に適しています。中心となる流れは次のとおりです：WASMを読み込む → ファイルを仮想ファイルシステムに書き込む → ドキュメントを読み込む → テキスト形式で保存する → リソースを解放する → バイトストリームを読み取ってダウンロードする。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up