私は Blazor サーバー プロジェクトに取り組んでいます。要件の 1 つは、ポップアップ ウィンドウにレコードを表示し、それを PDF ドキュメントとして印刷することです。 レコードが多すぎて 1 ページに収まらない場合、PDF は 単一ページ としてのみ保存されます。つまり、PDF の最初のページに収まるレコードはわずかしかないということです。 PDF にすべてのレコードを表示するにはどうすればよいですか? CSSのせいでしょうか？
モーダルは次のとおりです:
@ページ「/dialogcard/{注文}」
@usingIMS.CoreBusiness
@usingIMS.UseCases.Interfaces.OrderDetail
@using System.Globalization
@inject IViewOrderDetailsByOrderIdUseCase ViewOrderDetailsByOrderIdUseCase
@inject DialogService DialogService
@inject IJSRuntime JsRuntime
<スタイル>
.rz-ダイアログ-ラッパー {
左:0;
}
/*.rz-カード{
マージントップ: -1.9rem !重要;
}*/
.rz-ダイアログコンテンツ {
マージントップ: -55px;
}
</スタイル>
@if (orderDetails != null)
{
<div id="printarea1">
<div class="行 my-4">
<div class="col-md-12">
＜ラジゼンカード＞
<h3クラス="h5">
注文日: @Order.OrderDateTime
</h3>
<RadzenTabs>
<タブ>
@{
var 詳細ベンダー ID = 0;
}
@foreach (orderDetails の var 詳細)
{
@if (詳細ベンダー ID != 詳細.ベンダー ID)
{
<RadzenTabsItem Text="@detail.Vendor.Name">
<div class="行">
<div class="col-lg-6 d-flex">
<RadzenCard Style="幅: 100%; オーバーフロー: 非表示;">
<h3 class="h5">連絡先</h3>
<div class="d-flex flex-row">
<div>
会社
<b>ヴォーランス</b>
<div class="mt-3">責任者</div>
<b>@detail.Order.DoneBy</b>
<div class="mt-3">ベンダー</div>
<b>@detail?.ベンダー名</b>
</div>
</div>
</RadzenCard>
</div>
<div class="col-lg-6 d-flex">
<RadzenCard Style="幅: 100%; オーバーフロー: 非表示;">
<h3 class="h5">配送情報</h3>
<div class="行">
<div class="col">
<div>会社名</div>
@switch (詳細.倉庫)
{
ケース「深セン倉庫」:
<b>@string.Format(new CultureInfo("en-US"), "test")</b>
<div>アドレス</div>
<b>@string.Format(new CultureInfo("en-US"), "test")</b>
<div>連絡先名</div>
<b>@string.Format(new CultureInfo("en-US"), "test")</b>
<div>メール</div>
<b>@string.Format(new CultureInfo("en-US"), "test")</b>
<div>電話</div>
<b>@string.Format(new CultureInfo("en-US"), " 1233455")</b>
壊す;
ケース「米国倉庫」:
<b>@string.Format(new CultureInfo("en-US"), "会社名: TRADING LLC")</b>
<div>アドレス</div>
<b>@string.Format(new CultureInfo("en-US"), "1243445,Coconut Creek, FL, ZIP Code: 33073")</b>
<div>連絡先名</div>
<b>@string.Format(new CultureInfo("en-US"), "Test")</b>
<div>メール</div>
<b>@string.Format(new CultureInfo("en-US"), "[email protected]")</b>
<div>電話</div>
<b>@string.Format(new CultureInfo("en-US"), " 123242422")</b>
壊す;
「個人配送」の場合:
<b>@string.Format(new CultureInfo("en-US"), "ELEKTRONIK SANAYI VE TICARET LTD. STI.")</b>
<div>アドレス</div>
<b>@string.Format(new CultureInfo("en-US"), "test")</b>
<div>連絡先名</div>
<b>@string.Format(new CultureInfo("en-US"), "Test")</b>
<div>メール</div>
<b>@string.Format(new CultureInfo("en-US"), "[email protected]")</b>
<div>電話</div>
<b>@string.Format(new CultureInfo("en-US"), "111122")</b>
壊す;
}
@* アドレス
<b>@(詳細?.倉庫)</b>
*@
</div>
</div>
</RadzenCard>
</div>
</div>
<RadzenDataGridAllowFiltering="false"AllowPaging="false"AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
Data="@orderDetails.Where(x => x.VendorId == 詳細.VendorId)" TItem="OrderDetail" Class="mt-3" Style="height:190px">
<列>
<RadzenDataGridColumn TItem="OrderDetail" Property="OrderId" Title="注文 ID" width="100px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="商品 ID" width="100px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="商品コード" width="150px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="通貨" Title="通貨" 幅="95px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="数量" Title="数量" 幅="95px">
<フッターテンプレート>
<b>@string.Format(new CultureInfo("tr-TR"), "{0:G}", orderDetails?.Where(x => x.VendorId == 詳細.VendorId).Sum(o = > o.数量))</b>
</フッターテンプレート>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="BuyUnitPrice" Title="単価" width="100px">
<テンプレートコンテキスト="詳細">
@switch (詳細.通貨)
{
ケース「USD」:
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol,detail.BuyUnitPrice)
壊す;
「ユーロ」の場合：
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol,detail.BuyUnitPrice)
壊す;
デフォルト：
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol,detail.BuyUnitPrice)
壊す;
}
</テンプレート>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="合計価格" width="100px">
<テンプレートコンテキスト="詳細">
@switch (詳細.通貨)
{
ケース「USD」:
@string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol,detail.TotalBuyPrice)
壊す;
「ユーロ」の場合：
@string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol,detail.TotalBuyPrice)
壊す;
デフォルト：
@string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol,detail.TotalBuyPrice)
壊す;
}
</テンプレート>
<フッターテンプレート>
@switch (詳細.通貨)
{
ケース「USD」:
<b>@string.Format(new CultureInfo("en-US"), "{0:N2}", orderDetails?.Where(x => x.VendorId == 詳細.VendorId).Sum(o = > o.合計購入価格))</b>
壊す;
「ユーロ」の場合：
<b>@string.Format(new CultureInfo("en-FR"), "{0:N2}", orderDetails?.Where(x => x.VendorId == 詳細.VendorId).Sum(o => o.TotalBuyPrice))</b>;
壊す;
デフォルト：
<b>@string.Format(new CultureInfo("tr-TR"), "{0:N2}", orderDetails?.Where(x => x.VendorId == 詳細.VendorId).Sum(o = > o.合計購入価格))</b>
壊す;
}
</フッターテンプレート>
</RadzenDataGridColumn>
</列>
</RadzenDataGrid>
</RadzenTabsItem>
}
詳細ベンダー ID = 詳細.ベンダー ID;
}
</タブ>
</RadzenTabs>
</RadzenCard>
</div>
</div>
</div>
}
<div class="行">
<div class="col-md-12 text-right">
<RadzenButton Click="@((args) => DialogService.Close(false))" ButtonStyle="ButtonStyle.Secondary" Text="Close" Style="width: 120px" Class="mr-1"/> ;
<RadzenButton Click="PrintDocument" Text="Print" Style="width: 120px" />
@*<button type="button" class="btn btn-primary btns" @onclick="PrintDocument">印刷</button>*@
</div>
</div>
@コード{
[パラメータ] public ReportViewModel Order { get; set; }
IEnumerable<OrderDetail> orderDetails;
protected オーバーライド非同期タスク OnInitializedAsync()
{
orderDetails = await ViewOrderDetailsByOrderIdUseCase.ExecuteAsync(Order.OrderId);
}
プライベート void PrintDocument()
{
JsRuntime.InvokeVoidAsync("print");
}
}
これはパターンのスクリーンショットです:
これは印刷プレビューです:
これは関連する CSS です:
@メディア プリント {
体 * {
可視性: 非表示;
}
#printarea1、#printarea1 *{
可視性: 可視;
}
#printarea、#printarea * {
可視性: 可視;
}
.rz-tabview-nav li:not(.rz-tabview-selected) {
表示: なし。
}
#printarea1 {
位置: 固定;
左: 0;
上: 170ピクセル;
}
#printarea {
位置: 固定;
左: 15ピクセル;
トップ: 0;
}
button[type=button]、input[type=text] {
表示: なし。
}
.rz-データグリッド {
高さ: 未設定!重要;
}
}
編集 1
少し調べてCSSをこのように変更しましたが、まだ1ページです:(
.rz-データグリッド {
高さ: 自動!重要;
オーバーフロー: 表示されます!重要;
改ページ後: 常に;
} 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ブラウザでは、デフォルトでページを印刷する際のページ サイズ オプションとして A4 が使用されます。ページ サイズに適応するために、ブラウザの印刷プレビューでははみ出したコンテンツが自動的に非表示になります。したがって、多数の列を含むデータ グリッドは、印刷ページのサイズに合わせて切り取られます。
多数の列を印刷するには、コンテンツ サイズに基づいて [印刷オプション] パネルでスケーリング オプションを調整します。
データ グリッドに大量のデータが含まれている場合、ブラウザのパフォーマンスを考慮すると、すべてのデータを一度に印刷することは最適なオプションではありません。すべての DOM 要素を 1 つのページでレンダリングすると、ブラウザーでパフォーマンスの問題が発生するためです。これにより、ブラウザが遅くなったり、応答しなくなったりする可能性があります。 DataGrid には、仮想化を通じて大量のデータを処理するオプションがあります。ただし、印刷時に行と列の仮想化を使用することはできません。
すべてのデータを印刷する必要がある場合は、データ グリッドを Excel、CSV、または PDF ファイルにエクスポートしてから、別の非 Web ベースのアプリケーションから印刷することをお勧めします。
PDF を生成するには、syncfusion などのメソッドやライブラリが多数あります。