WebAssemblyに対応したPDFビューワでPDFファイルを編集する

本記事では、Webアプリケーションに「DioDocs（ディオドック）」のPDFビューワを追加してPDFファイルを表示・編集する方法を紹介します。

PDFビューワについて

DioDocsのPDFビューワは、ブラウザでPDFドキュメントを表示・編集することができるJavaScriptライブラリです。PDFドキュメントを表示することは、クライアントサイドのJavaScriptライブラリのみで可能です。

しかし、PDFドキュメントに注釈やフォームを追加して保存するといった編集機能を使用したい場合には、「サポートAPI」と呼ばれる編集機能を追加する必要があります。従来のバージョンでは、このサポートAPIをサーバーサイドで動作するASP.NET Core Web APIとして実装する必要がありました。

最新バージョンの「V7J SP2」では、WebAssemblyで実装したサポートAPIを提供しています。WebAssemblyのサポートAPIを使用することでサーバーサイドとの接続が不要になり、ブラウザで直接 PDFドキュメントに注釈やフォームを追加して保存できるようになります。

また、WebAssemblyのサポートAPIを使用することには以下のようなメリットがあります。

配布が容易：サーバーサイドにサポートAPIを実装する必要がなく、クライアントサイドのWebアプリケーションを配布するだけで済みます
パフォーマンス：WebAssemblyでサポートAPIを提供するのでインターネット回線の速度やサーバーのパフォーマンスの影響を受けません
セキュリティ：PDFドキュメントはクライアントサイドのブラウザー内で編集されるので、サーバーと機密データを交換する必要がありません
シンプルなJavaScript／HTMLによる開発：実装においてVisual Studioや .NETは必要ありません
互換性：WebAssembly はすべての主要なブラウザでサポートされているため、互換性の問題が発生することなく、さまざまなプラットフォームやデバイス間でシームレスに動作します

主な機能

PDFビューワは、WebAssemblyのサポートAPIを使用することでこれまでサーバーサイドのサポートAPIが必要だった以下のPDFドキュメント編集機能をクライアントサイドで提供します。

フォームの入力と編集
注釈の編集
セカンダリツールバーを使用したクイック編集
PDFオーガナイザー（PDFページの作成、結合、並べ替え、削除）
オプションコンテンツ（レイヤー）の編集

なお、以下の機能についてはまだ対応していませんが、今後のリリースで追加される予定です。

墨消し注釈の追加と適用
注釈のコンテンツへの変換
電子署名
画像形式での出力
リニアライズ
共有および共同編集

実装方法

Webアプリケーションの作成

まず、Visual Studio Codeを起動してターミナルでプロジェクトのフォルダquickstart-wasmを作成してquickstart-wasmフォルダに移動します。

mkdir quickstart-wasm
cd quickstart-wasm

npm installコマンドを使用してPDFビューワのパッケージをインストールします。

npm install @mescius/dspdfviewer

quickstart-wasmフォルダにindex.htmlを作成して、index.htmlのbody要素に、PDFビューワを表示するためのdiv要素を追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>DioDocs for PDFクイックスタート | PDFビューワー（WebAssembly）サンプル</title>
  </head>
  <body>
    <div id="pdfviewer"></div>    
  </body>
</html>

さらにscript要素を追加してPDFビューワを設定します。

<!DOCTYPE html>
<html>
  <head>
    <title>DioDocs for PDFクイックスタート | PDFビューワー（WebAssembly）サンプル</title>
  </head>
  <body>
    <div id="pdfviewer"></div>    
  </body>
  <script src="/node_modules/@mescius/dspdfviewer/dspdfviewer.js"></script>
  <script async type="text/javascript" src="/node_modules/@mescius/dspdfviewer/DsPdf.js"></script>
  <script src="/node_modules/@mescius/dspdfviewer/wasmSupportApiServer.js"></script>
  <script>
    //DsPdfViewer.LicenseKey = '***key***';
    var viewer = new DsPdfViewer("#pdfviewer", {
        supportApi: {
            implementation: new WasmSupportApi()
        }
    });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
  </script>  
</html>

ローカルで動作確認するための開発用のサーバーとして、Visual Studio Codeの拡張機能「Live Server」をインストールします。その後、index.htmlを右クリックして、［Open with Live Server］を実行します。