・Nugetで追加
GrapeCity.ActiveReports.Aspnetcore.Viewer(16.0.2) を追加
・プロジェクトに追加
wwwroot/js/ に jsViewer.min.js
wwwroot/css/ に jsViewer.min.css
※これらは、npmで云々と記述されているが
公式からDLしたインストーラーでインストールした下記フォルダに入ってる。
～\Program Files(x86)\ActiveReportsNET16\Deployment\JSViewer
・Program.cs にレポート機能を追加を記述(青字部分)
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
var builder = WebApplication.CreateBuilder(args);
～～ 略 ～～
var app = builder.Build();
～～ 略 ～～
app.UserStaticFiles();
app.UseReporting(settings =>
{
settings.UseFileStore(new DirectoryInfo("サーバーのレポートファイルの場所"));
settings.UseCompression = true;
});
～～ 略 ～～
・ページレポート(rdlx)を作成する
・レポートエクスプローラーのパラメータから追加する
名前：ReportParameter1
非表示にチェックONしておいた。
とする。
・レポートエクスプローラーのデータソースを追加
名前は適当
種類にJson Providerを指定
接続、接続文字列のタブに
「="jsondata=" & Parameters!ReportParameter1.Value」とする
赤字部分は、パラメータの名前にすること。
・データセットを追加
作成したデータソースにデータセットを追加する。
クエリに「$.[*]」を指定(これがないと、「コマンドテキストが空です。」と怒られる。
フィールドに必要な項目を追加。(名前は小文字の方がいいかも？)
・cshtmlに記述する
・jsとcssの参照を追加
<link rel="stylesheet" href="~/css/jsViewer.min.css" asp-append-version="true" />
<script src="~/js/jsViewer.min.js" asp-append-version="true"></script>
・HTML
<div id="previewcontainer"> </div>
・scriptタグの中
//elementはviewerを表示するdivのjQueryセレクタ
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element : '#previewcontainer',
reportService: {
url: '@(Url.Content("~/api/reporting"))'
}
});
var jsondata = [{ "id": "1000", "name": "太郎"},{ "id": "1001", "name": "花子"}];
const param = [
{
name: 'ReportParameter1', //ページレポートのパラメータ名と一致させる
values: [JSON.stringify(jsondata)]
}
];
//ページレポート(rdlx)は、Program.csに指定したフォルダに入れておく
viewer.openReport("TEST.rdlx", param);
こんなもんだったと思う。
jsondataの取得部分をajaxでRazorPageにアクセスして取得。
JsonResultで返せばOK
