我正在開發 Blazor 伺服器專案。要求之一是在彈出視窗中顯示記錄,然後將其列印為 PDF 文件。如果記錄太多而無法容納在一頁上,PDF 將僅儲存為單頁。我的意思是只有幾筆記錄適合顯示在 PDF 的第一頁。如何讓PDF顯示所有記錄? 是CSS的原因嗎?
這裡是模態:
@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>
這是模式的螢幕截圖:
這是列印預覽:
這是相關的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; 頂: 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; }
P粉4959559862024-03-20 15:09:51
瀏覽器預設使用A4作為頁面尺寸選項來列印頁面,為了適應頁面尺寸,瀏覽器列印預覽會自動隱藏溢出的內容。因此,具有大量列的資料網格將被剪掉以適應列印頁面的大小。
要列印大量列,請根據內容大小調整列印選項面板中的縮放選項。
當資料格包含大量資料時,考慮到瀏覽器效能,一次列印所有資料並不是最佳選擇。因為在單一頁面中渲染所有 DOM 元素會在瀏覽器中產生效能問題。這會導致瀏覽器速度變慢或無回應。 DataGrid 可以選擇透過虛擬化處理大量資料。但是,在列印時,無法對行和列使用虛擬化。
如果仍然需要列印所有數據,我們建議您將數據網格匯出到 Excel 或 CSV 或 Pdf 文件,然後從另一個非基於 Web 的應用程式進行列印。
產生PDF的方法和函式庫有很多,像是syncfusion等