DioDocs for PDF
PDFエディタの構成 （クライアント完結型）
PDFビューワ > PDFの編集 > PDFエディタの構成 （クライアント完結型）

PDFビューワでは、WebAssembly(Wasm)ベースのサポートAPIを提供しています。WasmベースのサポートAPIは、クライアントのブラウザ上で動作するため、サポートAPI用のサーバを構築したり、そのサーバサイドのサポートAPIと通信を行うことなく、クライアント側のみでPDFの編集や保存を行うことができます。

WasmベースのサポートAPIは、デフォルトで14種類のPDF標準フォントをサポートしていますが、registerFont メソッドを使用することで、Webサーバーからカスタムフォントを追加することも可能です。詳細については、カスタムフォントを参照してください。

メモ: サポートAPIは、PDFドキュメントを編集する場合、必須となります。また、使用するにはDioDocs for PDF ライセンスが必要です。

WasmベースのPDFビューワの編集設定

以下の手順では、ASP.NET Core WebアプリケーションでWasmベースのサポートAPIとPDFビューワを使用して、PDFファイルを表示および編集する方法を説明します。

  1. Microsoft Visual Studio 2022を開き、[新しいプロジェクトの作成] > [ASP.NET Core Web アプリケーション]を選択します。
  2. [新しい ASP.NET Core Web アプリケーションの作成]ダイアログで、ターゲット フレームワークとして 「.NET 6.0」 を選択します。
    メモ: WindowsでFireFoxによって表示される警告を回避するために、[HTTPS用に構成]オプションがオフになっていることを確認してください。
  3. サンプルプロジェクトが正常にビルド・実行されている（ブラウザで初期画面が表示される）ことを確認します。以降の手順はプロジェクト名を「WebApplication1」として想定します。
  4. 次のコマンドを実行してPDFビューワをインストールします。コマンドプロンプトのディレクトリがlibフォルダに設定されていることを確認してください。PDFビューワはWebApplication1\wwwroot\libにインストールされます。
    npm install @mescius/dspdfviewer
    メモ: wasmSupportApi.js はサイズが大きなファイルです。PDFビューワの編集機能を使用しない場合や、サーバー側でサポートAPIを用意する場合には、配布時のサイズを減らすために、このファイルを削除することが可能です。
  5. 「\Pages\Index.cshtml」のデフォルトの内容を次のコードに置き換えます。
    index.cshtml
    コードのコピー 
    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<style>
    .container {
        height: calc(100% - 128px);
        max-width: inherit;
    }

    #host, .pb-3 {
        height: 100%;
    }
</style>
<div id="host"></div>
<script src="~/lib/node_modules/@@mescius/dspdfviewer/dspdfviewer.js" asp-append-version="true"></script>
<script async type="text/javascript" src="~/lib/node_modules/@@mescius/dspdfviewer/DsPdf.js"></script>
<script src="~/lib/node_modules/@@mescius/dspdfviewer/wasmSupportApiServer.js"></script>
<script>
    //DsPdfViewer.LicenseKey = '***key***';
    var viewer = new DsPdfViewer("#host", {
        supportApi: {
            implementation: new WasmSupportApi()
        }
    });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.newDocument();
</script>
  6. プロジェクトをビルドして実行すると、PDFドキュメントを編集するための注釈エディタやフォームエディタを含むPDFビューワがブラウザに表示されます。

制限事項

WasmベースのサポートAPIは、以下の機能について未サポートです。

 

 

© MESCIUS inc. All rights reserved.