ホーム

PDFビューワ

[製品ページ] [製品ヘルプ]

PDFビューワは、JavaScriptをベースにしたクライアントサイドのビューワおよびエディタです。

Edge、Chrome、FireFox、Opera、Safariなど主要なブラウザ、 およびWindows、macOS、Linux、iOS、Androidなどのクロスプラットフォーム環境で動作します。

また、PDFビューワは、Pure JavaScript、Angular、Vue、ASP.NET Core、ASP.NET MVC、HTML5、Reactなどの 主要なWebフレームワークに簡単に組み込むことができます。

PDFビューワには、編集機能が用意されており、supportApiプロパティを介してPDF編集用バックエンドに 接続され有効になります。このバックエンドについては、以下の２種類の手法を用意しています。

  • WebAssembly（Wasm）ベースのSupportApi：クライアントのブラウザ上で実行される自己完結型バックエンドです。サーバーへの接続を必要としません。必要なライブラリは、すべてPDFビューワの配布パッケージに含まれています。
  • サーバーベースのSupportApi：サーバー上で実行されているDioDocs for PDFへの接続が必要です。サーバーサイドでPDFへの変更処理が行われ、その結果がクライアントに返される仕組みです。一部の機能（オンラインでの共同編集など）は、こちらの手法でのみ利用できます。

このオンラインデモでは、使用するSuportApiについて、切り替えることが可能です。切り替えたい場合には、デモページ上部にあるボタンをクリックしてください。

  • クライアントサイド SupportApiに切替：クライアントブラウザ上で実行されるWasmベースのSupportApiが使用されます
  • サーバーサイド SupportApiに切替：サーバー上で実行されているSupportApiが使用されます

WasmベースのSupportApiを使用している場合、一部の機能は利用できなくなります。あらかじめご注意ください。

PDFビューワの編集機能が有効になると、以下のような機能を使用できます。

  • 注釈エディタでの注釈の追加および編集
  • フォームエディタでのフォームフィールドの追加および編集
  • フォームの記入および記入済みのフォームの保存
  • 専用のパネル上での他のユーザのコメントに返信
  • リアルタイムなPDFの共同編集
  • 注釈やフォームフィールドを静的なPDFコンテンツに変換
  • 墨消し
  • その他

本デモサイトのサンプルを確認するには：

  • 左にあるツリーからサンプルを選択できます。最近追加されたサンプルや新機能を示すサンプルには new マークが、１つ前に追加されたサンプルには new マークが付いています。
  • 表示されるビューワにて、サンプルPDFを表示・編集できます。
  • 下部のコードパネルのタブにて、サンプルコードを確認できます。
  • サンプルコードを修正し、［実行］ボタンを押すと、すぐに修正結果を確認できます。
  • サンプルをリロードすると、元の状態に戻ります。

サンプルソースをダウンロードし、ビルド・実行するには：

  1. ［ZIP形式でソースファイルをダウンロード］ボタンを押すと、現在のサンプルソースをダウンロードできます。
  2. ダウンロードしたZIPファイルを任意のディレクトリに展開します。
  3. そのディレクトリに移動します。
  4. 「run.cmd」バッチファイルを実行します。これにより、サンプルソースがSupportApiとともにビルド・実行され、 デフォルトのブラウザにてURL「http://localhost:3003」が表示されます。
  5. 詳しくは、ダウンロードしたZIPに含まれる「readme.md」をご覧ください。