サーバー側のDioDocs for PDFとPDFビューワを連携させて注釈とフォームを編集
図3で無効化されていた注釈とフォームのパネルを利用するには、WebサーバーでDioDocs for PDFを動作させて、PDFビューワと連携させる必要があります。
PDFビューワとDioDocs for PDFを連携して実行させると「注釈」「フォーム」パネルが有効になります。注釈パネルをクリックすると、画面上部のメニューバーに注釈エディタが表示され、PDFに注釈を追加できます。画面左側では注釈のプロパティが設定可能です。
![図5 PDFに注釈を配置する操作(P002UseSupportApi)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_005.png)
フォームについても同様に、画面上部のフォームエディタからフォーム部品を選択してPDFに配置できます。
![図6 PDFにフォームを配置する操作(P002UseSupportApi)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_006.png)
PDFビューワ上で注釈やフォームを編集することで、図7のような注釈やフォームを含んだPDFを作成できます。
![図7 PDFビューワで作成した、注釈とフォームを含むPDFファイル(P002UseSupportApi/sample002_edited.pdf)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_007.png)
なお、注釈エディタやフォームエディタで利用できる全機能については、公式ドキュメントの注釈エディタ、フォームエディタに関する記述を参照してください。
次に、PDFビューワとDioDocs for PDFを連携して実行する方法を説明していきます。まずVisual Studioで「ASP.Net Core Web アプリ」のプロジェクト(ソリューション)を生成します。WebAPIの実装(SupportApiプロジェクト)は、DioDocs for PDFのデモで公開されているサンプルコードに含まれています。サンプルコードをダウンロードして、その中に含まれるSupportApiフォルダをソリューションのフォルダにコピーします。
![図8 SupportApiフォルダをコピー(P002UseSupportApi)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_008.png)
Visual Studioのソリューション エクスプローラで「追加」-「既存のプロジェクト」メニューを実行して、SupportApiフォルダに含まれるSupportApi.csprojを指定し、ソリューションにSupportApiプロジェクトを追加します。
![図9 ソリューションにSupportApiプロジェクトを追加(P002UseSupportApi)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_009.png)
ASP.NET Coreのプロジェクトから、追加したSupportApiプロジェクトを参照するよう設定します。
![図10 SupportApiプロジェクトを参照するよう設定(P002UseSupportApi)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_010.png)
ASP.NET CoreでWebAPIを実装するため、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)](http://cz-cdn.shoeisha.jp/static/images/article/14159/14159_011.png)
生成されたSupportApiController.csに、リスト5の通り実装します。SupportApiプロジェクト内で実装されているGcPdfViewerControllerクラスにWebAPIの実装が含まれているため、それをそのまま継承します。また、コンストラクタではDioDocsのライセンスキーを設定します。リスト5の実装により「api/SupportApi」というパスでSupportApiが提供されるようになります。
[Route("api/[controller]")] [ApiController] public class SupportApiController : GcPdfViewerController { // コンストラクタ public SupportApiController() { // DioDocsのライセンスキーを設定 GcPdfDocument.SetLicenseKey("<ライセンスキー>"); } }
JavaScript側では、PDFビューワを生成するときに、リスト6(1)の通り、コンストラクタの第2引数にSupportApiのパス「api/SupportApi」を設定して、サーバー側のDioDocsと連携できるようにします。
// ビューワを生成 let viewer = new GcPdfViewer('#root', { // SupportApiを設定して、PDFビューワとサーバー側のDioDocsを連携 ...(1) supportApi: 'api/SupportApi' }); (以下略)
以上の実装により、PDFビューワとDioDocsが連携して動作するようになり、注釈やフォームが編集できます。