我正在尝试在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解决了我的问题。