我正在尝试在Blazor服务器应用程序上打印（PDF）模式对话框。模式对话框打开，但遗憾的是，输出不会出现在打印预览窗口上。如何打印模态对话框？有什么我错过了，我恳请您的帮助？
下面是Radzen Modal对话框：
下面是空打印预览窗口：
对话框剃刀：
@page "/dialogcard/{OrderID}"@using IMS.CoreBusiness@using IMS.UseCases.Interfaces.Order@using IMS.UseCases.Orders@inject IViewOrderByIdUseCase ViewOrderByIdUseCase@inject Radzen.DialogService DialogService@inject IJSRuntime JsRuntime<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">@*<RadzenImage Path="@order?.DoneBy" Class="rounded-circle float-left mt-1 mr-3" Style="width: 90px; height: 90px;" />*@<div><div>Employee</div><b>@order?.DoneBy</b><div class="mt-3">Company</div><b>@order?.Customer?.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>Address</div><b>@(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.ShippingNumber)), @(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.TrackingNumber))</b><div class="mt-3">Vendor</div><b>@(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.Vendor.Name))</b></div></div></RadzenCard></div></div><div class="row my-4"><div class="col-md-12"><RadzenCard><h3 class="h5">Order @OrderID Details<RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.TotalBuyPrice))}") Class="float-right" /></h3><RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"Data="@(orderDetails?.Where(o => o.Order?.Id == OrderID))" TItem="OrderDetail" ColumnWidth="200px" Class="mt-3"><Columns><RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" /><RadzenDataGridColumn TItem="OrderDetail" Property="Order.OrderDate" Title="Order Date" /><RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" /></Columns></RadzenDataGrid></RadzenCard></div></div><div class="row hideWhenPrint"><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" /></div></div>@code {[Parameter] public int OrderID { get; set; }Order? order;IEnumerable<OrderDetail> orderDetails;IList<Order?> SelectedOrders { get; set; }IEnumerable<Order?> _orders = new List<Order?>();protected override async Task OnInitializedAsync(){order = await ViewOrderByIdUseCase.ExecuteAsync(OrderID);SelectedOrders = new List<Order?> { _orders.FirstOrDefault() };}private async Task PrintDocument(){await JsRuntime.InvokeVoidAsync("Print");}}
下面是我的print js：
function Print() {$(".hideWhenPrint").hide();window.print();$(".hideWhenPrint").show();}
下面是_Layout.cshtml：
@using Microsoft.AspNetCore.Components.Web@namespace IMS.WebApp.Pages@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><base href="~/"/><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/><link href="css/site.css" rel="stylesheet"/><link href="IMS.WebApp.styles.css" rel="stylesheet"/><link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"><link href="css/sidebars.css" rel="stylesheet"/><component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/></head><body>@RenderBody()<div id="blazor-error-ui"><environment include="Staging,Production">An error has occurred. This application may no longer respond until reloaded.</environment><environment include="Development">An unhandled exception has occurred. See browser dev tools for details.</environment><a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div><script src="_framework/blazor.server.js"></script><script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script><script src="~/jquery/jquery.min.js"></script><script src="~/bootstrap/js/bootstrap.min.js"></script><script src="~/js/myjs.js"></script><script>window.downloadFileFromStream = async (fileName, contentStreamReference) => {const arrayBuffer = await contentStreamReference.arrayBuffer();const blob = new Blob([arrayBuffer]);const url = URL.createObjectURL(blob);const anchorElement = document.createElement('a');anchorElement.href = url;anchorElement.download = fileName ?? '';anchorElement.click();anchorElement.remove();URL.revokeObjectURL(url);}</script></body></html>
编辑1
我检查了Chrome开发人员工具，在我点击对话框上的打印按钮后，它在控制台上给出了这个错误。
Unchecked runtime.lastError: The message port closed before a response was received.
1条答案
按热度按时间7gs2gvoe1#
正如建议的那样，我把这个作为一个单独的答案。
在对话框剃刀的
<div class="row">周围添加<div id="printarea">，并在site.css中使用此CSS解决了我的问题。