[PDFビューワ] 単純なHTMLページで使用する方法 – MESCIUS ナレッジベース

作成日: 2021/06/04 最終更新日: 2026/02/06

文書種別

使用方法

詳細

DioDocsのPDFビューワはJavaScriptライブラリとして構成されています。
ライブラリ（jsファイル）を参照するだけで簡単に使用できます。

製品ヘルプの以下のトピックでは Visual Studio でWebアプリケーションを作成していますが、PDFビューワの表示機能を使用するだけであれば、Visual Studio は必要ありません。

PDFビューワの構成

以下のような単純なHTMLページでもPDFビューワを表示できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PDF Viewer</title>
  <script type="text/javascript" src="node_modules/@mescius/dspdfviewer/dspdfviewer.js"></script>
</head>
<body>
 <div id="root"></div>
 <script>
  window.onload = function(){
    const viewer = new DsPdfViewer('#root');
    viewer.addDefaultPanels();
    viewer.newDocument();
  }
 </script>
</body>
</html>

PDFビューワのライブラリはnpmから以下のコマンドで取得できます。

npm install @mescius/dspdfviewer

また、WebAssembly(Wasm)を利用して編集機能を有効にすることも可能です。
この場合、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PDF Viewer</title>
  <script type="text/javascript" src="node_modules/@mescius/dspdfviewer/dspdfviewer.js"></script>
  <!-- WasmベースのサポートAPIを利用するための参照 -->
  <script type="text/javascript" src="node_modules/@mescius/dspdfviewer/DsPdf.js"></script>
  <script type="text/javascript" src="node_modules/@mescius/dspdfviewer/wasmSupportApiServer.js"></script>
</head>
<body>
 <div id="root"></div>
 <script>
  window.onload = function(){
    const viewer = new DsPdfViewer('#root', { 
        supportApi: {
            implementation: new WasmSupportApi()
        }
    });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.newDocument();
  }
 </script>
</body>
</html>

ただし、WasmベースのサポートAPIには制限事項があります。
詳細は製品ヘルプの以下のトピックをご確認ください。

PDFエディタの構成（クライアント完結型）

完全な編集機能を使用するためには、サーバーサイドにサポートAPIを実装する必要があります。
この場合は Visual Studio が必要です。具体的な手順は以下のトピックをご確認ください。

PDFエディタの構成（サーバー接続型）