Blazor - Imprimindo via Javascript - II

Hoje vamos continuar mostrando como imprimir no Blazor usando os recursos da interoperabilidade JavaScript.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Continuando a primeira parte do artigo veremos agora como imprimir um documento como uma fatura. Aqui o procedimento usado será o mesmo. O objetivo é mostrar que podemos gerar documentos usando código Html e imprimir via Javascript.

No exemplo usado o documento foi criado apenas com dados estáticos mas poderíamos usar dados dinâmicos referenciando um serviço que acessa os dados que desejamos inserir no documento.

Recursos usados:

Blazor : Imprimindo um documento

Vamos abrir o projeto criado no artigo anterior e incluir mais uma opção no menu alterando o código do arquivo NavMenu.razor da pasta Shared do projeto.

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Blazor_Print</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="employees"  @onclick="()=> expandSubMenu1 = !expandSubMenu1">
                <span class="oi oi-plus" aria-hidden="true"></span> Funcionários
            </NavLink>
            @if (expandSubMenu1)
            {
                <ul class="nav flex-column">
                    <li class="nav-item px-4">
                        <NavLink class="expand-menu" href="print">
                            <span class="oi oi-print" aria-hidden="true"></span> Imprimir
                        </NavLink>
                    </li>
                </ul>
            }
        </li>
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="menuprint">
                <span class="oi oi-plus" aria-hidden="true"></span> Impressão Geral
             </NavLink>
          </li>
    </ul>
</div>
@code {
    private bool collapseNavMenu = true;
    private bool expandSubMenu1;
    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Neste código estamos criando a opção de menu Impressão Geral que mapeia para a rota menuprint que será um novo componente que iremos criar em seguida. Abaixo vemos o link gerado no menu:

Agora vamos criar o componente MenuPrint.razor na pasta Pages que vai  exibir os dados dos funcionários:

@page "/menuprint"
@inject IJSRuntime IJS
<p>Blazor - Imprimindo via JavaScript</p>
<hr />
<div class="row">
    <div class="col-4">
        <button class="btn btn-primary" @onclick="PrintEmployees">Imprimir Funcionários</button>
    </div>
    <div class="col-4">
        <button class="btn btn-primary" @onclick="PrintDocumento">Imprimir Fatura</button>
    </div>
</div>
@code
{
    public async Task PrintEmployees()
    {
        await IJS.InvokeAsync<object>("open", new object[] { "/printemployees", "_blank" });
    }
    public async Task PrintDocumento()
    {
        await IJS.InvokeAsync<object>("open", new object[] { "/documento", "_blank" });
    }
}

Este componente será acionado quando o usuário clicar no menu Impressão Geral.

Aqui temos dois botões:

  1. Imprimir Funcionários - Vai imprimir a relação de funcionários conforme mostrado na primeira parte do artigo;
  2. Imprimir Fatura - Vai imprimir uma fatura com alguns dados;

Vamos agora criar o componente Razor DocumentoEmployee.razor na pasta Pages onde vamos criar o modelo da fatura para impressão conforme o código a seguir:

@layout BlankLayout
@page "/documento"
<body onload="window.print()">
    <br />
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="invoice-title">
                    <h2>Fatura</h2><h3 class="pull-right">Pedido # 12345</h3>
                </div>
                <hr>
                <div class="row">
                    <div class="col-xs-6">
                        <address>
                            <strong>Faturada para:</strong><br>
                            Manoel Ribeiro<br>
                            Rua Projetada 100<br>
                            Apto. 4B<br>
                            São Paulo - SP
                        </address>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <address>
                            <strong>Método de Pagamento:</strong><br>
                            Visa final **** 4242<br>
                            manoel@email.com
                        </address>
                    </div>
                    <div class="col-xs-6 text-right">
                        <address>
                            <strong>Data Pedido:</strong><br>
                            30 de Outubro de 2020<br><br>
                        </address>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><strong>Pedido</strong></h3>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-condensed">
                                <thead>
                                    <tr>
                                        <td><strong>Item</strong></td>
                                        <td class="text-center"><strong>Preço</strong></td>
                                        <td class="text-center"><strong>Quantidade</strong></td>
                                        <td class="text-right"><strong>Total</strong></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Mouse Ótico 400 dpi</td>
                                        <td class="text-center">R$ 35,90</td>
                                        <td class="text-center">1</td>
                                        <td class="text-right">R$ 35,90</td>
                                    </tr>
                                    <tr>
                                        <td>Monitor LG 23' Wide</td>
                                        <td class="text-center">R$ 620,00</td>
                                        <td class="text-center">1</td>
                                        <td class="text-right">R$ 620,00</td>
                                    </tr>
                                    <tr>
                                        <td class="thick-line"></td>
                                        <td class="thick-line"></td>
                                        <td class="thick-line text-center"><strong>Subtotal</strong></td>
                                        <td class="thick-line text-right">R$ 655,90</td>
                                    </tr>
                                    <tr>
                                        <td class="no-line"></td>
                                        <td class="no-line"></td>
                                        <td class="no-line text-center"><strong>Frete</strong></td>
                                        <td class="no-line text-right">R$ 35,00</td>
                                    </tr>
                                    <tr>
                                        <td class="no-line"></td>
                                        <td class="no-line"></td>
                                        <td class="no-line text-center"><strong>Total</strong></td>
                                        <td class="no-line text-right">R$ 690,90</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

O código deste componente usa a definição de um layout definido em BlankLayout e o restante do código refere-se a código Html que será impresso via javascript.

Pronto ! já podemos testar a impressão da lista de funcionários e do documento usando Javascript.

Executando o projeto teremos o resultado a seguir:

Na próxima parte do artigo veremos como exibir e imprimir um documento PDF via JavaScript.

Pegue o projeto aqui:  Blazor_Print2.zip (sem as referências)

(Disse Jesus)"Eu sou a videira verdadeira, e meu Pai é o lavrador. Toda a vara em mim, que não dá fruto, a tira; e limpa toda aquela que dá fruto, para que dê mais fruto."
João 15:1,2
 


Referências:


José Carlos Macoratti