PDFビューワの構成

以下の手順は、PDFファイルを表示するためにPDFビューワを使用する ASP.NET Core Webアプリケーションの作成方法を紹介します。

.NET 6/ .NET 7
.NET Core 3.1/ .NET 5

Microsoft Visual Studio 2022を開き、[新しいプロジェクトの作成] > [ASP.NET Core Web アプリケーション]を選択します。
[新しい ASP.NET Core Web アプリケーションの作成]ダイアログで、ターゲットフレームワークとして「.NET 6.0（長期的なサポート）」を選択します。
メモ: WindowsでFireFoxによって表示される警告を回避するために、[HTTPS用に構成]オプションがオフになっていることを確認してください。
サンプルプロジェクトが正常にビルド・実行されている（ブラウザで初期画面が表示される）ことを確認します。以降の手順はプロジェクト名を「WebApplication1」として想定します。
次のコマンドを実行してPDFビューワをインストールします。コマンドプロンプトのディレクトリがlibフォルダに設定されていることを確認してください。PDFビューワはWebApplication1\wwwroot\libにインストールされます。
npm install @mescius/dspdfviewer
メモ: このコマンドを実行する場所は、ビューワがコマンドに対して相対的に配置されるため重要です。上記のコマンドは、ビューワをWebApplication1\wwwroot\lib\node_modules@mescius\dspdfviewerに配置します。
Visual Studioでは、新しいHTMLページ（「index.html」という名前）を「wwwroot」フォルダに追加します。

次のサンプルコードをindex.htmlファイルに貼り付けます。

index.html	コードのコピー
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>PDF Viewer Demo \| PDF Plugin</title> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"> <script> function loadPdfViewer(selector) { var viewer = new DsPdfViewer(selector, { /* Specify options here */ } ); viewer.addDefaultPanels(); viewer.open("Wetlands.pdf"); } </script> </head> <body onload="loadPdfViewer('#root')"> <div id="root"></div> <script type="text/javascript" src="lib/node_modules/@mescius/dspdfviewer/dspdfviewer.js "></script> </body> </html>

index.html

コードのコピー

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>PDF Viewer Demo | PDF Plugin</title>
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
    <script>
        function loadPdfViewer(selector) {
            var viewer = new DsPdfViewer(selector, { /* Specify options here */ }
            );
            viewer.addDefaultPanels();
            viewer.open("Wetlands.pdf");
        }
    </script>
</head>
<body onload="loadPdfViewer('#root')">
    <div id="root"></div>
    <script type="text/javascript" src="lib/node_modules/@mescius/dspdfviewer/dspdfviewer.js "></script>
</body>
</html>

メモ:上記のサンプルコードは、PDFビューワをページに追加するだけでなく、起動時に静的PDF（Wetlands.pdf）もロードします。Wetlands.pdfがwwwrootディレクトリにあることを確認してください。

デフォルトのコードを次のサンプルコードに置き換えて、Program.cs ファイルを変更します。

Program.cs	コードのコピー
var builder = WebApplication.CreateBuilder(args); // コンテナにサービスを追加します。 builder.Services.AddRazorPages(); var app = builder.Build(); // HTTP リクエストパイプラインを構成します。 if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); // デフォルトの HSTS 値は 30 日です。運用シナリオではこれを変更することもできます。https://aka.ms/aspnetcore-hsts を参照してください。 app.UseHsts(); } app.UseHttpsRedirection(); app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapRazorPages(); app.Run();

Program.cs

コードのコピー

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

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

アプリケーションをビルドして実行すると、PDFビューワ（Wetlands.pdfがロードされている）を含むページがデフォルトのブラウザに表示されます。

Microsoft Visual Studioを開き、[新しいプロジェクトの作成] > [ASP.NET Core Web アプリケーション]を選択します。
[新しい ASP.NET Core Web アプリケーションの作成]ダイアログで、次のように設定します。
- .NET Core / ASP.NET Core 3.1
- [空]プロジェクトテンプレート
  メモ: WindowsでFireFoxによって表示される警告を回避するために、[HTTPS用に構成]オプションがオフになっていることを確認してください。
サンプルプロジェクトが正常にビルド・実行されている（ブラウザで初期画面が表示される）ことを確認します。以降の手順はプロジェクト名を「WebApplication1」として想定します。
ファイルエクスプローラーでプロジェクトを開き、以下に示すように「wwwroot」および「lib」ディレクトリを作成します。
WebApplication1\wwwroot
WebApplication1\wwwroot\lib
次のコマンドを実行してPDFビューワをインストールします。コマンドプロンプトのディレクトリがlibフォルダに設定されていることを確認してください。PDFビューワはWebApplication1\wwwroot\libにインストールされます。
```
npm install @mescius/dspdfviewer
```
メモ: このコマンドを実行する場所は、ビューワがコマンドに対して相対的に配置されるため重要です。上記のコマンドは、ビューワをWebApplication1\wwwroot\lib\node_modules@mescius\dspdfviewerに配置します。
Visual Studioでは、新しいHTMLページ（「index.html」という名前）を「wwwroot」フォルダに追加します。

次のサンプルコードをindex.htmlファイルに貼り付けます。

index.html	コードのコピー
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>PDF Viewer Demo \| PDF Plugin</title> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"> <script> function loadPdfViewer(selector) { var viewer = new DsPdfViewer(selector, { /* Specify options here */ } ); viewer.addDefaultPanels(); viewer.open("Wetlands.pdf"); } </script> </head> <body onload="loadPdfViewer('#root')"> <div id="root"></div> <script type="text/javascript" src="lib/node_modules/@mescius/dspdfviewer/dspdfviewer.js "></script> </body> </html>

index.html

コードのコピー

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>PDF Viewer Demo | PDF Plugin</title>
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
    <script>
        function loadPdfViewer(selector) {
            var viewer = new DsPdfViewer(selector, { /* Specify options here */ }
            );
            viewer.addDefaultPanels();
            viewer.open("Wetlands.pdf");
        }
    </script>
</head>
<body onload="loadPdfViewer('#root')">
    <div id="root"></div>
    <script type="text/javascript" src="lib/node_modules/@mescius/dspdfviewer/dspdfviewer.js "></script>
</body>
</html>

メモ:上記のサンプルコードは、PDFビューワをページに追加するだけでなく、起動時に静的PDF（Wetlands.pdf）もロードします。Wetlands.pdfがwwwrootディレクトリにあることを確認してください。

デフォルトの「Configure」メソッドを次のサンプルコードに置き換えて、Startup.csファイルを変更します。これにより、アプリの起動時にデフォルトでindex.htmlが開きます。

Startup.cs	コードのコピー
var builder = WebApplication.CreateBuilder(args); // コンテナにサービスを追加します。 builder.Services.AddRazorPages(); var app = builder.Build(); // HTTP リクエストパイプラインを構成します。 if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); // デフォルトの HSTS 値は 30 日です。運用シナリオではこれを変更することもできます。https://aka.ms/aspnetcore-hsts を参照してください。 app.UseHsts(); } app.UseHttpsRedirection(); app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapRazorPages(); app.Run();

Startup.cs

コードのコピー

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

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

アプリケーションをビルドして実行すると、PDFビューワ（Wetlands.pdfがロードされている）を含むページがデフォルトのブラウザに表示されます。

PDFファイルのロード

PDF ビューワの open メソッドは、ローカルパス、同ドメイン、および他のドメイン URL ソースからの PDF ファイルのロードをサポートしています。

ローカルファイルからロード

Pdf ビューワでローカル PDF ファイルを開くには、ビューワの左上隅にある [開く] ボタン ( ) をクリックします。「開く」ダイアログが開き、PDF ファイルを選択します。

また、コードにて PDF ファイルを開くこともできます。次のサンプルコードは、ローカルから PDF ファイルを開く方法を示しています。

	コードのコピー
// ローカルパス。 viewer.open("assets/pdf/newsletter.pdf");

URLからロード

Pdf ビューワで同じドメイン URL から PDF ファイルを開くには、open メソッドに URL 文字列を渡します。

次のサンプルコードは、同じドメイン URL から PDF ファイルを開く方法を示しています。

	コードのコピー
// URＬパス。 viewer.open("https://developer.mescius.com/documents-api-pdf/docs/newsletter.pdf");

メモ：上記のサンプルコード例は、Mescius Web サイトで公開されている DsPdfViewer デモから取得したものです。また、Mescius Web サイトで公開されているファイルを開いて、URL が同じドメインに属していることを確認します。

異なるドメイン URL からロード

PDFビューワで異なるドメイン URL から PDF ファイルを開くには、open メソッドで CorsProxy を使用して URL 文字列を渡します。

次のサンプルコードは、異なるドメイン URL から PDF ファイルを開く方法を示しています。

	コードのコピー
// 異なるドメイン URL パス。 viewer.open("https://localhost:7288/api/pdf-viewer/CorsProxy?url=https://developer.mescius.com/documents-api-pdf/docs/newsletter.pdf");

メモ：CorsProxyメソッドを使用するには、SupportApiを構成する必要があります。詳細については、「PDFエディタの構成（サーバー接続型）」を参照してください。