ページにJSビューワを組み込む
以上でレポートの設計は終わりです。このレポートをブラウザで表示するため、ページにJSビューワを組み込みます。
JSビューワのコピー
JSビューワは、次の2つのファイルで構成されます。
- jsViewer.min.css
- jsViewer.min.js
この2つのファイルは、ActiveReports for .NETをインストールしたフォルダのJSViewer以下（C:\Program Files (x86)\ActiveReportsNET16\Deployment\JSViewer）に含まれているので、この2つのファイルをwwwroot以下にコピーします。ここでは、それぞれcssフォルダ、jsフォルダの下にコピーします。
ページへの組み込み
ページに、JSビューワを組み込みます。ここでは、トップページであるPagesフォルダのIndex.cshtmlに組み込むことにします。リスト2のように修正します。
リスト2では、表示領域を次のように「viewer-id」というID値を設定したdiv要素として用意しています。
<div id="viewer-id" style="width: 1200px; height: 100vh;"> </div>
ここに次のようなJavaScriptのコードで、JSビューワを埋め込みます。element属性には、差し込み先のID値、つまり、上記のdiv要素に指定したIDを指定します。reportIDにはレポートファイル名を指定します。
その他のオプションについては、公式ドキュメントの「JavaScriptでJSビューワの操作」を参照してください。
<script type="text/javascript">
GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-id',
reportService: {
url: 'api/reporting',
},
reportID: 'PageReport.rdlx',
settings: {
zoomType: 'FitPage'
},
});
</script>
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ActiveReportsのサンプル</title>
<link rel="stylesheet" href="css/jsViewer.min.css" />
</head>
<body>
<!-- 表示する領域-->
<div id="viewer-id" style="width: 1200px; height: 100vh;">
</div>
<!-- 上記の領域にJSビューワを設定する -->
<script src="js/jsViewer.min.js"></script>
<script type="text/javascript">
GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-id',
reportService: {
url: 'api/reporting',
},
reportID: 'PageReport.rdlx',
settings: {
zoomType: 'FitPage'
},
});
</script>
</body>
</html>
コンテナの調整
いったん、これでビルドして確認します。
JSビューアが表示されて、帳票が表示されますが、文字が切れています。これは、Linuxコンテナに対して、まだフォントをインストールしていないのが原因です。
最後の作業として、コンテナにフォントをインストールします。Visual Studioでプロジェクト内に作られているDockerfileファイルを開きます。デフォルトでは、次のように構成されています。
#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging. FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base WORKDIR /app EXPOSE 80 FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build WORKDIR /src COPY ["ActiveReports-Example1/ActiveReports-Example1.csproj", "ActiveReports-Example1/"] RUN dotnet restore "ActiveReports-Example1/ActiveReports-Example1.csproj" COPY . . WORKDIR "/src/ActiveReports-Example1" RUN dotnet build "ActiveReports-Example1.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "ActiveReports-Example1.csproj" -c Release -o /app/publish /p:UseAppHost=false FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "ActiveReports-Example1.dll"]
この最初のコンテナに対して、IPAフォントを組み込みます。
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base WORKDIR /app EXPOSE 80
IPAフォントは、「fonts-ipafont-gothic」（IPAゴシック）のパッケージで提供されているので、apt-getでインストールします。また、言語を日本語（ja_JP.UTF-8）に変更します。具体的には、リスト3のように変更します。
下記で指定している「libdgiplus」は、GDI+をサポートするためのライブラリで、セクションレポートを作る際に必要となるライブラリです。ページレポートの場合は必要ありませんが、ここでは念のため入れておきます。
# フォントをインストールし、言語を日本語にする
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
RUN apt-get update \
&& apt-get install -y \
fonts-ipafont-gothic \
libgdiplus\
locales\
&& apt-get clean \
&& apt-get autoremove -y \
&& rm -rf /var/lib/apt/lists/*
RUN sed -i -E 's/# (ja_JP.UTF-8)/\1/' /etc/locale.gen \
&& locale-gen
ENV LANG ja_JP.UTF-8
EXPOSE 80
# 以下は変更なし
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["ActiveReports-Example1/ActiveReports-Example1.csproj", "ActiveReports-Example1/"]
RUN dotnet restore "ActiveReports-Example1/ActiveReports-Example1.csproj"
COPY . .
WORKDIR "/src/ActiveReports-Example1"
RUN dotnet build "ActiveReports-Example1.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "ActiveReports-Example1.csproj" -c Release -o /app/publish /p:UseAppHost=false
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ActiveReports-Example1.dll"]
帳票の完成
以上で完成です。実行すると、帳票が表示されます。作成された帳票は、もちろんページ送りもできますし、印刷もできます。
まとめ
ActiveReports for .NETは、今回説明したように、データソースを指定して、それをどこに配置するかをデザイナで指定するだけで、簡単に帳票が作れます。
今回は利用していませんが、条件を指定してデータをフィルタする機能もあります。また印刷せずに、ExcelやWord、PDFなどにエクスポートしたデータを送ることもできるため、帳票のみならず、さまざまなデータのエクスポータとしても活用できます。
