AS-Report 12をWebアプリに組み込みMicrosoft Azure App Service (Windows)にデプロイする

AS-Report 12では、サポート対象環境にクラウドのMicrosoft Azure App Service が含まれています。

本記事ではWebアプリ(ASP.NET Core Web MVC)をMicrosoft Azure App Service (Windows)にデプロイするまでの流れを解説します。

※Microsoft Azure App ServiceでAS-Reportを使用する際、ホスティングプランの価格レベルが"Basic"以上に設定されていないと正しく動作しない場合がございますので、ご注意ください。

環境
- 実行環境
- 開発環境
Webアプリの作成
デプロイする
- Microsoft Azure App Service (Windows)にデプロイする
さいごに

環境

実行環境

Microsoft Azure App Service (Windows)

開発環境

Windows 11
.NET 6
Visual Studio 2022

Webアプリの作成

帳票を作成しプレビューする簡単なWebアプリを作成していきます。

新規プロジェクト(ASP.NET Core Web MVC)の作成

Visual Studio 2022を起動し、[新しいプロジェクト] > [ASP.NET Core Web アプリ (Model-View-Controller)]を選択後、任意のプロジェクト名を入力して[次へ]をクリックします。

[フレームワーク] > [.NET 6.0]を選択して[作成]をクリックします。
(その他の設定はデフォルトとします。)

AS-Report 12のインストール

AS-Report 12をインストールします。

ソリューションエクスプローラーの[依存関係]を右クリックし、[NuGet パッケージの管理]を選択します。

パッケージソースにnuget.orgを指定し、[参照]タブにパッケージ一覧が表示されるため、検索ボックスで"AdvanceSoftware.ASReport.CellReport"を検索します。パッケージファイルを選択し、[インストール]ボタンをクリックしてパッケージファイルをインストールします。

Web用ビューアの追加

AS-Report 12のインストールフォルダ内、[Bin] - [v12.0.0] - [Scripts]フォルダのファイルをコピーし、プロジェクトの[wwwroot] - [js]フォルダに格納します。

プログラムの実装

[Controllers] > [HomeController.cs]に帳票プレビュー用の処理を実装します。

// Controllers/HomeController.cs
using ASR12WebSample.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;

namespace ASR12WebSample.Controllers
{
  public class HomeController : Controller
  {
    private readonly ILogger<HomeController> _logger;
    AdvanceSoftware.ASReport.CellReport cellReport1;

    public HomeController(ILogger<HomeController> logger)
    {
      _logger = logger;
    }

    public IActionResult Index()
    {
      cellReport1 = new AdvanceSoftware.ASReport.CellReport();
      // 帳票作成処理
      cellReport1.Report.Start();
      cellReport1.Report.Create(AdvanceSoftware.ASReport.ExcelVersion.ver2024);
      cellReport1.Page.Start("Sheet1", "1");
      cellReport1.Cell("A1").Value = "アドバンスソフトウェア";
      cellReport1.Page.End();
      cellReport1.Report.End();
      // SVGZ 形式で帳票ドキュメントを取得します。
      string reportDocument = cellReport1.Report.GetSvgzReport(
          AdvanceSoftware.ASReport.SvgSaveType.IncludeExcelPdf);
      ViewData["document"] = reportDocument;

      return View();
    }

次に[Views] > [Home] > [Index.cshtml]にWeb用ビューアの処理を追加します。

<!-- Views/Home/Index.cshtml -->
@{
    ViewData["Title"] = "Home Page";
}

<script type="text/javascript" src="/js/asreport.viewer.1.0.0.js"></script>
<script type="text/javascript" src="/js/gunzip.min.js"></script>
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>

<!--帳票ドキュメント格納用のDIV要素(id="documentcontainer")を用意。ViewData で帳票ドキュメントを挿入-->
<div id="documentcontainer" style="display:none;">
  @Html.Raw(ViewData["document"])
</div>

<!--ビューア配置用のDIV要素(id="viewercontainer")を用意。width、height でサイズ指定-->
<div id="viewercontainer" style="width:100%;height:650px;">
</div>

<!--ビューアの表示とプレビュー実行-->
<script type="text/javascript">
  $(function () {
    // ビューアを id名[viewercontainer] の DIV 要素に表示
    viewer = new CellReport.Viewer('viewercontainer');
    // id名[documentcontainer] の DIV 要素に格納された帳票ドキュメントを読み込み、プレビューを実施
    viewer.report('documentcontainer');
  });
</script>