Blazor Server弹窗打印PDF仅显单页，如何显示全部记录？
2026-8-9
Blazor Server弹窗打印PDF仅显示单页问题解决
我正在开发Blazor Server项目，需求是在弹窗中显示记录并打印为PDF文档。但当记录过多超出一页容量时，PDF只保存第一页能容纳的少量内容，无法显示全部记录。怀疑是CSS配置导致的问题，求解决办法。
弹窗代码（Razor）
@page "/dialogcard/{Order}" @using IMS.CoreBusiness @using IMS.UseCases.Interfaces.OrderDetail @using System.Globalization @inject IViewOrderDetailsByOrderIdUseCase ViewOrderDetailsByOrderIdUseCase @inject DialogService DialogService @inject IJSRuntime JsRuntime <style> .rz-dialog-wrapper { left:0; } /*.rz-card{ margin-top: -1.9rem !important; }*/ .rz-dialog-content { margin-top: -55px; } </style> @if (orderDetails != null) { <div id="printarea1"> <div class="row my-4"> <div class="col-md-12"> <RadzenCard> <h3 class="h5"> Order Date: @Order.OrderDateTime </h3> <RadzenTabs> <Tabs> @{ var detailVendorId = 0; } @foreach (var detail in orderDetails) { @if (detailVendorId != detail.VendorId) { <RadzenTabsItem Text="@detail.Vendor.Name"> <div class="row"> <div class="col-lg-6 d-flex"> <RadzenCard Style="width: 100%; overflow: hidden;"> <h3 class="h5">Contact</h3> <div class="d-flex flex-row"> <div> <div>Company</div> <b>Vorlance</b> <div class="mt-3">Responsible</div> <b>@detail.Order.DoneBy</b> <div class="mt-3">Vendor</div> <b>@detail?.Vendor.Name</b> </div> </div> </RadzenCard> </div> <div class="col-lg-6 d-flex"> <RadzenCard Style="width: 100%; overflow: hidden;"> <h3 class="h5">Delivery Information</h3> <div class="row"> <div class="col"> <div>Company Name</div> @switch (detail.Warehouse) { case "Shenzhen Warehouse": <b>@string.Format(new CultureInfo("en-US"), "test")</b> <div>Address</div> <b>@string.Format(new CultureInfo("en-US"), "test")</b> <div>Contact Name</div> <b>@string.Format(new CultureInfo("en-US"), "test")</b> <div>Email</div> <b>@string.Format(new CultureInfo("en-US"), "test")</b> <div>Phone</div> <b>@string.Format(new CultureInfo("en-US"), "+1233455")</b> break; case "USA Warehouse": <b>@string.Format(new CultureInfo("en-US"), "Company Name: TRADING LLC")</b> <div>Address</div> <b>@string.Format(new CultureInfo("en-US"), "1243445,Coconut Creek, FL, ZIP Code: 33073")</b> <div>Contact Name</div> <b>@string.Format(new CultureInfo("en-US"), "Test")</b> <div>Email</div> <b>@string.Format(new CultureInfo("en-US"), "gulcin@test.com")</b> <div>Phone</div> <b>@string.Format(new CultureInfo("en-US"), "+123242422")</b> break; case "Private Shipping": <b>@string.Format(new CultureInfo("en-US"), "ELEKTRONIK SANAYI VE TICARET LTD. STI.")</b> <div>Address</div> <b>@string.Format(new CultureInfo("en-US"), "test")</b> <div>Contact Name</div> <b>@string.Format(new CultureInfo("en-US"), "Test")</b> <div>Email</div> <b>@string.Format(new CultureInfo("en-US"), "s@test.com")</b> <div>Phone</div> <b>@string.Format(new CultureInfo("en-US"), "111122")</b> break; } @* <div>Address</div> <b>@(detail?.Warehouse)</b> *@ </div> </div> </RadzenCard> </div> </div> <RadzenDataGrid AllowFiltering="false" AllowPaging="false" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@orderDetails.Where(x => x.VendorId == detail.VendorId)" TItem="OrderDetail" Class="mt-3" Style="height:190px"> <Columns> <RadzenDataGridColumn TItem="OrderDetail" Property="OrderId" Title="Order ID" Width="100px"/> <RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Product ID" Width="100px"/> <RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Product Code" Width="150px"/> <RadzenDataGridColumn TItem="OrderDetail" Property="Currency" Title="Currency" Width="95px"/> <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" Width="95px"> <FooterTemplate> <b>@string.Format(new CultureInfo("tr-TR"), "{0:G}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Sum(o => o.Quantity))</b> </FooterTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="OrderDetail" Property="BuyUnitPrice" Title="Unit Price" Width="100px"> <Template Context="detail"> @switch (detail.Currency) { case "USD": @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.BuyUnitPrice) break; case "EURO": @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice) break; default: @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice) break; } </Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="Total Price" Width="100px"> <Template Context="detail"> @switch (detail.Currency) { case "USD": @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}",new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalBuyPrice) break; case "EURO": @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}",new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice) break; default: @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}",new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice) break; } </Template> <FooterTemplate> @switch (detail.Currency) { case "USD": <b>@string.Format(new CultureInfo("en-US"), "{0:N2}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Sum(o => o.TotalBuyPrice))</b> break; case "EURO": <b>@string.Format(new CultureInfo("en-FR"), "{0:N2}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Sum(o => o.TotalBuyPrice))</b> break; default: <b>@string.Format(new CultureInfo("tr-TR"), "{0:N2}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Sum(o => o.TotalBuyPrice))</b> break; } </FooterTemplate> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> </RadzenTabsItem> } detailVendorId = detail.VendorId; } </Tabs> </RadzenTabs> </RadzenCard> </div> </div> </div> } <div class="row"> <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">Print</button>*@ </div> </div> @code { [Parameter] public ReportViewModel Order { get; set; } IEnumerable<OrderDetail> orderDetails; protected override async Task OnInitializedAsync() { orderDetails = await ViewOrderDetailsByOrderIdUseCase.ExecuteAsync(Order.OrderId); } private void PrintDocument() { JsRuntime.InvokeVoidAsync("print"); } }
弹窗截图
打印预览截图
原始打印CSS
@media print { body * { visibility: hidden; } #printarea1, #printarea1 *{ visibility: visible; } #printarea, #printarea * { visibility: visible; } .rz-tabview-nav li:not(.rz-tabview-selected) { display: none; } #printarea1 { position: fixed; left: 0; top: 170px; } #printarea { position: fixed; left: 15px; top: 0; } button[type=button], input[type=text] { display: none; } .rz-data-grid { height: unset!important; } }
编辑1：修改后的CSS（仍未解决）
.rz-data-grid { height: auto !important; overflow: visible !important; page-break-after: always; }
问题根源与解决步骤
1. 核心问题
- 固定定位锁死内容：打印时
#printarea1用了position: fixed，固定定位元素无法跨页，超出部分被截断。 - 表格高度限制：RadzenDataGrid设置了固定
height:190px，即使打印时改height为auto，内部滚动容器可能仍限制内容展开。 - 分页规则缺失：没有配置打印分页逻辑，内容无法自动拆分到多页。
2. 具体修复方案
（1）移除打印时的固定定位
修改打印媒体查询中的容器定位：
@media print { /* 保留其他原有样式 */ #printarea1 { position: static; /* 替换fixed为静态定位 */ left: auto; top: auto; width: 100%; /* 确保内容占满打印页宽度 */ } #printarea { position: static; left: auto; top: auto; } }
（2）彻底解除表格高度限制
覆盖Radzen表格的所有高度和滚动限制：
@media print { .rz-data-grid, .rz-data-grid-content { height: auto !important; overflow: visible !important; } }
同时，动态切换表格高度（打印时取消固定高度）：
修改Razor中的RadzenDataGrid组件：
<RadzenDataGrid ... Class="mt-3" Style="@(isPrinting ? "height:auto" : "height:190px")">
在@code块中添加打印状态控制：
private bool isPrinting = false; private async Task PrintDocument() { isPrinting = true; StateHasChanged(); // 强制更新UI await JsRuntime.InvokeVoidAsync("print"); isPrinting = false; StateHasChanged(); }
（3）添加打印分页规则
避免内容被截断，配置合理的分页逻辑：
@media print { @page { margin: 2cm; /* 设置打印页边距，防止内容被裁剪 */ } .rz-tabs-item { page-break-after: always; /* 每个标签页内容单独一页 */ } .rz-data-grid { page-break-inside: avoid; /* 避免表格被中间截断 */ } .rz-data-grid-tbody tr { page-break-inside: avoid; /* 避免单行跨页 */ } }
（4）调整打印可见性
确保打印时没有多余元素干扰：
@media print { body * { visibility: hidden; } #printarea1, #printarea1 * { visibility: visible; } .rz-dialog-wrapper, .rz-dialog-content, button[type=button] { display: none !important; /* 隐藏弹窗框架和按钮 */ } }
内容的提问来源于stack exchange，提问作者raysefo
相关产品推荐
相关产品推荐
