搜尋

首頁  >  問答  >  主體

如何在JSRuntime中列印視窗以顯示所有記錄?

我正在開發 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>
                                                             
</RadzenCard> <div class="col-lg-6 d-flex"> <h3 class="h5">配送資訊</h3> <div class="row">
公司名稱
@switch(詳細資料.倉庫) { 案例「深圳倉庫」: <b>@string.Format(new CultureInfo("en-US"), "test")
地址
<b>@string.Format(new CultureInfo("en-US"), "test")
聯絡人姓名
<b>@string.Format(new CultureInfo("en-US"), "test")
電子郵件
<b>@string.Format(new CultureInfo("en-US"), "test")
電話
<b>@string.Format(new CultureInfo("en-US"), " 1233455") 休息; 案例“美國倉庫”: <b>@string.Format(new CultureInfo("en-US"), "公司名稱:TRADING LLC")
地址
; <b>@string.Format(new CultureInfo("en-US"), "1243445,Coconut Creek, FL, 郵遞區號:33073")
聯絡人姓名
<b>@string.Format(new CultureInfo("en-US"), "Test")電子郵件
<b>@string.Format(new CultureInfo("en-US"), "[電子郵件受保護]")
電話
<b>@string.Format(new CultureInfo("en-US"), " 123242422") 休息; 案例「私人運輸」: <b>@string.Format(new CultureInfo("en-US"), "ELEKTRONIK SANAYI VE TICARET LTD. STI.")
地址
<b>@string.Format(new CultureInfo("en-US"), "test")
聯絡人姓名
<b>@string.Format(new CultureInfo("en-US"), "Test")電子郵件 <b>@string.Format(new CultureInfo("en-US"), "[電子郵件受保護]")
電話
<b>@string.Format(new CultureInfo("en-US"), "111122") 休息; } @*
地址
; <b>@(詳情?.倉庫)</b> *@ </RadzenCard> ; ; <RadzenDataGridAllowFiltering=“假”AllowPaging=“假”AllowSorting=“真”FilterCaseSensitivity=“FilterCaseSensitivity.CaseInsensitive” Data="@orderDetails.Where(x => x.VendorId ==Detail.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="Currency" Title="Currency" Width="95px"/>/> <頁尾模板> <b>@string.Format(new CultureInfo("tr-TR"), "{0:G}", orderDetails?.Where(x => x.VendorId ==Detail.VendorId).Sum(o = > ; o.數量))</b> </頁尾範本> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="OrderDetail" Property="BuyUnitPrice" Title="單價" Width="100px"> <範本上下文=“詳細資料”> @switch(詳細資料。貨幣) { 案例“美元”: @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(詳細資料。貨幣) { 案例“美元”: @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(詳細資料。貨幣) { 案例“美元”: <b>@string.Format(new CultureInfo("en-US"), "{0:N2}", orderDetails?.Where(x => x.VendorId ==Detail.VendorId).Sum(o = > o.TotalBuyPrice)) 休息; 案例“歐元”: <b>@string.Format(new CultureInfo("en-FR"), "{0:N2}", orderDetails?.Where(x => x.VendorId ==Detail.VendorId).Sum(o => o.TotalBuyPrice)); 休息; 預設: <b>@string.Format(new CultureInfo("tr-TR"), "{0:N2}", orderDetails?.Where(x => x.VendorId ==Detail.VendorId).Sum(o = > o.TotalBuyPrice)) 休息; } </頁尾範本> </RadzenDataGridColumn> </欄> </RadzenDataGrid> </RadzenTabsItem> } 詳細供應商 ID = 詳細供應商 ID; } </標籤> </RadzenTabs> </RadzenCard> } <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="列印" Style="寬度:120px" /> @**@ ; @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;
         頂: 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粉139351297P粉139351297250 天前405

全部回覆(1)我來回復

  • P粉495955986

    P粉4959559862024-03-20 15:09:51

    瀏覽器預設使用A4作為頁面尺寸選項來列印頁面,為了適應頁面尺寸,瀏覽器列印預覽會自動隱藏溢出的內容。因此,具有大量列的資料網格將被剪掉以適應列印頁面的大小。

    要列印大量列,請根據內容大小調整列印選項面板中的縮放選項。

    當資料格包含大量資料時,考慮到瀏覽器效能,一次列印所有資料並不是最佳選擇。因為在單一頁面中渲染所有 DOM 元素會在瀏覽器中產生效能問題。這會導致瀏覽器速度變慢或無回應。 DataGrid 可以選擇透過虛擬化處理大量資料。但是,在列印時,無法對行和列使用虛擬化。

    如果仍然需要列印所有數據,我們建議您將數據網格匯出到 Excel 或 CSV 或 Pdf 文件,然後從另一個非基於 Web 的應用程式進行列印。

    產生PDF的方法和函式庫有很多,像是syncfusion

    回覆
    0
  • 取消回覆