CodeZine(コードジン)

特集ページ一覧

Webページ用PDFビューワで活用の幅が広がるPDFライブラリ「DioDocs for PDF」

.NETの実装でドキュメントを作成できるライブラリ「DioDocs」の活用

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

サーバー側のDioDocs for PDFとPDFビューワを連携させて注釈とフォームを編集

 図3で無効化されていた注釈とフォームのパネルを利用するには、WebサーバーでDioDocs for PDFを動作させて、PDFビューワと連携させる必要があります。

 PDFビューワとDioDocs for PDFを連携して実行させると「注釈」「フォーム」パネルが有効になります。注釈パネルをクリックすると、画面上部のメニューバーに注釈エディタが表示され、PDFに注釈を追加できます。画面左側では注釈のプロパティが設定可能です。

図5 PDFに注釈を配置する操作(P002UseSupportApi)
図5 PDFに注釈を配置する操作(P002UseSupportApi)

 フォームについても同様に、画面上部のフォームエディタからフォーム部品を選択してPDFに配置できます。

図6 PDFにフォームを配置する操作(P002UseSupportApi)
図6 PDFにフォームを配置する操作(P002UseSupportApi)

 PDFビューワ上で注釈やフォームを編集することで、図7のような注釈やフォームを含んだPDFを作成できます。

図7 PDFビューワで作成した、注釈とフォームを含むPDFファイル(P002UseSupportApi/sample002_edited.pdf)
図7 PDFビューワで作成した、注釈とフォームを含むPDFファイル(P002UseSupportApi/sample002_edited.pdf)

 なお、注釈エディタやフォームエディタで利用できる全機能については、公式ドキュメントの注釈エディタフォームエディタに関する記述を参照してください。

 次に、PDFビューワとDioDocs for PDFを連携して実行する方法を説明していきます。まずVisual Studioで「ASP.Net Core Web アプリ」のプロジェクト(ソリューション)を生成します。WebAPIの実装(SupportApiプロジェクト)は、DioDocs for PDFのデモで公開されているサンプルコードに含まれています。サンプルコードをダウンロードして、その中に含まれるSupportApiフォルダをソリューションのフォルダにコピーします。

図8 SupportApiフォルダをコピー(P002UseSupportApi)
図8 SupportApiフォルダをコピー(P002UseSupportApi)

 Visual Studioのソリューション エクスプローラで「追加」-「既存のプロジェクト」メニューを実行して、SupportApiフォルダに含まれるSupportApi.csprojを指定し、ソリューションにSupportApiプロジェクトを追加します。

図9 ソリューションにSupportApiプロジェクトを追加(P002UseSupportApi)
図9 ソリューションにSupportApiプロジェクトを追加(P002UseSupportApi)

 ASP.NET Coreのプロジェクトから、追加したSupportApiプロジェクトを参照するよう設定します。

図10 SupportApiプロジェクトを参照するよう設定(P002UseSupportApi)
図10 SupportApiプロジェクトを参照するよう設定(P002UseSupportApi)

 ASP.NET CoreでWebAPIを実装するため、Startup.csに以下の実装を追加します。

[リスト4]WebAPIを公開するASP.NET Coreの実装(P002UseSupportApi/P002UseSupportApi/Startup.cs)
public void ConfigureServices(IServiceCollection services)
{
    // APIコントローラーを有効にする ...(1)
    services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // wwwroot/index.htmlをデフォルトページにする
    app.UseDefaultFiles();
    // wwwroot以下の静的ファイルを有効にする
    app.UseStaticFiles();
    // ルーティングを有効にする ...(2)
    app.UseRouting();
    // APIコントローラーのエンドポイントを設定する ...(3)
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

 ConfigureServicesメソッドでは、(1)のAddControllersメソッドで、WebAPIを実装するコントローラーを有効にします。Configureメソッドでは、リスト3同様のUseDefaultFiles、UseStaticFilesメソッドのほか、(2)と(3)の指定でWebAPIが公開されるようにします。

 リスト4の実装後、Visual Studioの「追加」-「新しい項目」メニューで「API コントローラー - 空」を選択して、WebAPIを実装するControllers/SupportApiController.csファイルを生成します。

図11 WebAPIのコントローラーを生成(P002UseSupportApi)
図11 WebAPIのコントローラーを生成(P002UseSupportApi)

 生成されたSupportApiController.csに、リスト5の通り実装します。SupportApiプロジェクト内で実装されているGcPdfViewerControllerクラスにWebAPIの実装が含まれているため、それをそのまま継承します。また、コンストラクタではDioDocsのライセンスキーを設定します。リスト5の実装により「api/SupportApi」というパスでSupportApiが提供されるようになります。

[リスト5]SupportApiのWebAPI実装(P002UseSupportApi/P002UseSupportApi/Controllers/SupportApiController.cs)
[Route("api/[controller]")]
[ApiController]
public class SupportApiController : GcPdfViewerController
{
    // コンストラクタ
    public SupportApiController()
    {
        // DioDocsのライセンスキーを設定
        GcPdfDocument.SetLicenseKey("<ライセンスキー>");
    }
}

 JavaScript側では、PDFビューワを生成するときに、リスト6(1)の通り、コンストラクタの第2引数にSupportApiのパス「api/SupportApi」を設定して、サーバー側のDioDocsと連携できるようにします。

[リスト6]SupportApiを利用するPDFビューワの表示処理(P002UseSupportApi/P002UseSupportApi/wwwroot/js/site.js)
// ビューワを生成
let viewer = new GcPdfViewer('#root', {
  // SupportApiを設定して、PDFビューワとサーバー側のDioDocsを連携 ...(1)
  supportApi: 'api/SupportApi'
});
(以下略)

 以上の実装により、PDFビューワとDioDocsが連携して動作するようになり、注釈やフォームが編集できます。


関連リンク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:クラウド時代にマッチする、ドキュメント生成・更新APIライブラリ「DioDocs(ディオドック)」

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5