打印blazor页面并预览

方法 1：直接调用浏览器打印（简单快捷）

步骤 1：添加 JavaScript 互操作

在 App.razor中添加函数

<script>
//打印整个页面，显示对话框
function printPage() {
   window.print();
}
</script>

<script>
//打印Div，显示对话框
function printDiv(divId) {
const printContent = document.getElementById(divId).innerHTML;
const originalContent = document.body.innerHTML;

document.body.innerHTML = printContent;
window.print(); // 调用浏览器打印
document.body.innerHTML = originalContent; // 恢复页面
window.location.reload(); // 防止页面错乱（可选）
}
</script>

步骤 2：在 Blazor 中调用 JS 打印

@page "/print"
@using System.Net.Http
@inject IJSRuntime JavaScript

<!-- 要打印的内容区域 -->
<div id="printArea">
<h1>销售订单</h1>
<table class="table">
<tr>
<th>产品</th>
<th>数量</th>
<th>单价</th>
</tr>
<tr>
<td>笔记本电脑</td>
<td>1</td>
<td>¥5999</td>
</tr>
</table>
</div>

@code {
private async Task PrintPage()
{
await JavaScript.InvokeVoidAsync("printDiv", "printArea");
}
private async Task PrintAllPage()
{
await JavaScript.InvokeVoidAsync("printPage");
}

}
<button class="btn btn-primary" @onclick="PrintPage">打印Div</button>
<button class="btn btn-primary" @onclick="PrintAllPage">打印整个页面</button>

以下没有实验：

步骤 3：优化打印样式（可选）

在 wwwroot/css/site.css 中添加：

@media print {
    body * {
        visibility: hidden; /* 隐藏所有内容 */
    }
    #printArea, #printArea * {
        visibility: visible; /* 只显示打印区域 */
    }
    #printArea {
        position: absolute;
        left: 0;
        top: 0;
    }
}

---

方法 2：生成 PDF 并打印（适合复杂需求）

步骤 1：安装 iTextSharp 或 QuestPDF

dotnet add package QuestPDF

步骤 2：生成 PDF 并下载

@page "/pdfdemo"
@inject IJSRuntime JSRuntime

<button @onclick="GeneratePdf" class="btn btn-primary">生成PDF并打印</button>

@code {
    private async Task GeneratePdf()
    {
        var pdfBytes = GeneratePdfContent(); // 生成PDF字节流
        await JSRuntime.InvokeVoidAsync("downloadFile", "订单.pdf", pdfBytes);
    }

    private byte[] GeneratePdfContent()
    {
        using var memoryStream = new MemoryStream();
        var document = QuestPDF.Fluent.Document.Create(container =>
        {
            container.Page(page =>
            {
                page.Content().Column(column =>
                {
                    column.Item().Text("销售订单").FontSize(20);
                    column.Item().Table(table =>
                    {
                        table.ColumnsDefinition(columns =>
                        {
                            columns.RelativeColumn();
                            columns.RelativeColumn();
                            columns.RelativeColumn();
                        });
                        table.Header(header =>
                        {
                            header.Cell().Text("产品");
                            header.Cell().Text("数量");
                            header.Cell().Text("单价");
                        });
                        table.Cell().Text("笔记本电脑");
                        table.Cell().Text("1");
                        table.Cell().Text("¥5999");
                    });
                });
            });
        });
        document.GeneratePdf(memoryStream);
        return memoryStream.ToArray();
    }
}

在 wwwroot/js/print.js 中添加下载方法：

// 下载文件
export function downloadFile(filename, byteArray) {
    const blob = new Blob([byteArray], { type: "application/pdf" });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

---

方法对比

方法	适用场景	优点	缺点
浏览器打印	简单页面打印	代码少，兼容性好	无法精确控制分页
PDF 打印	复杂报表、后台静默打印	可精细控制样式	需要额外库支持