Blazor Print Example

程式開發步驟

以 Visual Studio 2019 新增 Blazor Server 專案。

Step 1 加入 jQuery 

 

 

 

 

Step 2 設定列印要隱藏 CSS 

將不須列印的部分加上 css class : hideWhenPrint

Shared/MainLayout.razor  

@inherits LayoutComponentBase

<div class="page"> 
    <div class="sidebar hideWhenPrint"> 
        <NavMenu /> 
    </div> 
    <div class="main"> 
        <div class="top-row px-4 hideWhenPrint"> 
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> 
        </div> 
        <div class="content px-4"> 
            @Body 
        </div> 
    </div> 
</div>

 

Step 3 呼叫 JavaScript 

wwwroot/js/print.js 

function Print() {
    $(".hideWhenPrint").hide();
    window.print();
    $(".hideWhenPrint").show();
}


Pages/_Host.cshtml 

<script src="~/jquery/jquery.min.js"></script> 
<script src="~/js/print.js"></script>

Blazor Call JavaScript

private void Print()
{
    jsRunTime.InvokeVoidAsync("Print");
}


原始碼 

GitHub - BlazorPrintExample


執行結果





參考 

Blazor : Generate Quick PDF || Easy Trick || 100% Free 

https://youtu.be/btp9LkmrBig