DioDocs for PDF
PDFエディタの構成 （サーバー接続型）
PDFビューワ > PDFの編集 > PDFエディタの構成 （サーバー接続型）

DioDocs for PDFを実行しているサーバーにサポートAPIを使用して（下記参照）接続すると、PDFビューワにて、一般的な編集オプション、注釈、フォームエディタツールを利用してPDFドキュメントを編集できます。

PDFビューワをPDFエディタとして設定するには、サーバー上のDioDocs for PDFに接続するためのサポートAPIを使用する必要があります。これにより、クライアント上でのPDFの編集操作や保存が可能になります。 PDFビューワは、サーバーサイドのAPI（サポートAPI経由のDioDocs for PDF）と連携し、変更を保存し、PDFをクライアントに送り返します。サポートAPIを取得する方法は、以下の2つがあります。

  1. NuGetパッケージを使用する
  2. ソースからサポートAPIを構築して使用する
メモ：サポートAPIは、PDFドキュメントを編集する場合、必須となります。また、使用するにはDioDocs for PDF ライセンスが必要です。

PDFビューワでの編集操作

  1. 以下のいずれかの方法で、PDFビューワにてPDFドキュメントを開きます。
    • [ドキュメントを開く]ボタンやCtrl+Oのショートカットキーで開く
    • [新規ドキュメントを開く]ボタンで新規のPDFドキュメントを作成する
    • デフォルトで表示されるPDFドキュメントを指定しておく
  2. PDFは一般的な編集機能や編集ツールを使用して編集されます。このとき、編集内容はすべてビューワによってローカルに保存されます。
  3. [保存]ボタンをクリックすると、元のPDFと編集内容がサポートAPIを経由してサーバーに送信されます。
  4. サーバーは送信されたファイルに編集を適用して、編集済みのPDFをクライアントに送り返します。
  5. 編集されたPDFは、クライアント側でローカルに保存して、任意のPDFリーダーなどで開くことができます。
メモ：編集や変更はサーバーには保持されません。[保存]ボタン実行の度に編集や変更はサーバにてPDFに適用され、編集済みのPDFが返送されます。

DioDocs.Pdf.ViewerSupportApi.jaパッケージの使用

DioDocs.Pdf.ViewerSupportApi.jaパッケージはNuGetから取得できるとともに、「トライアル版」よりダウンロードできるDioDocs for PDFのパッケージ一式にも含まれています。このパッケージをプロジェクトの参照に追加する必要があります。

以下の手順では、ASP.NET Core Webアプリケーションで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
  5. ソリューションエクスプローラーにてプロジェクトを右クリックし、[NuGet パッケージの管理]を選択します。
  6. Nugetパッケージマネージャーの右上にあるパッケージソースにて、「nuget.org」を選択します。
  7. 左上の[参照]タブをクリックして、「DioDocs.Pdf.ViewerSupportApi.ja」を検索します。
  8. 次の図に示すように、左側のパネルで「DioDocs.Pdf.ViewerSupportApi.ja」を選択します。
     
  9. 右側のパネルで[インストール]をクリックして、DioDocs.Pdf.ViewerSupportApi.jaパッケージとその依存関係をプロジェクトにインストールします。インストールが完了したら、DioDocs.Pdf.ViewerSupportApi.jaパッケージがソリューションエクスプローラーの[依存関係]フォルダーの下にある[パッケージ]フォルダーに追加されているかどうかを確認してください。
     
  10. 「\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>
    var viewer = new DsPdfViewer("#host", { supportApi: 'api/pdf-viewer' });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.newDocument();
</script>
  11. 次の図のように、プロジェクトに「Controllers」フォルダーを作成し、「MVC コントローラー ? 空のテンプレート」を選択してコントローラーを追加し、「SupportApiController.cs」クラスファイルを追加します。
  12. 「SupportApiController.cs」のコードを次のコードに置き換えます。
    C#
    コードのコピー 
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1
{
     [Route("api/pdf-viewer")]
    [ApiController]
    public class SupportApiController : GcPdfViewerController
    {
 
    }
}
  13. デフォルトのコードを次のサンプルコードに置き換えて、Program.cs ファイルを変更します。
    C#
    コードのコピー 
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Connection;
using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers;
using GrapeCity.Documents.Pdf.ViewerSupportApi.Models;
using ProtoBuf.Meta;
using System.Reflection;
using System.Security.Cryptography.X509Certificates;

var builder = WebApplication.CreateBuilder(args);

// コンテナにサービスを追加します。
builder.Services.AddRazorPages();
builder.Services.AddCors();
DsPdfViewerHub.ConfigureServices(builder.Services);

// サーバー側署名の実装。
var app = builder.Build();
app.UseCors("WebCorsPolicy");

// HTTP リクエスト パイプラインを構成します。
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // デフォルトの HSTS 値は 30 日です。 運用シナリオではこれを変更することもできます。https://aka.ms/aspnetcore-hsts を参照してください。
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

// 最上位のルート登録の使用を提案します。
IApplicationBuilder applicationBuilder = app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

// 最上位のルート登録の使用を提案します。
app.MapRazorPages();
app.Run();
  14. プロジェクトをビルドして実行すると、PDFドキュメントを編集するための注釈エディタやフォームエディタを含むPDFビューワがブラウザに表示されます。

ソースからのサポートAPIの構築と利用

サポートAPIのソースは、DioDocs.Pdf.ViewerSupportApi.jaパッケージ内の「src」フォルダに格納されています。「src」フォルダには、以下のものが含まれています。

ソースからサポートAPIを使用するには、上記の手順で説明したようにNuGetパッケージ「DioDocs.Pdf.ViewerSupportApi.ja」をプロジェクトに追加する代わりに、「SupportApi」プロジェクトをコピーしてアプリケーションソリューションに含めて、その参照をメインプロジェクトに追加する必要があります。なお、「SupportApi」プロジェクトの名前は、ASP.NET CoreとASP.NET WebFormsで異なることに注意してください。

 

 

© MESCIUS inc. All rights reserved.