Imprimir modal usando JS e Bootstrap 3

Neste artigo quero mostrar uma solução que montei para resolver o seguinte problema: um conteúdo mostrado em uma modal com um botão “imprimir”; o conteúdo deste modal (somente ele) teria que ser impresso.

Procurando na internet achei varias “soluções” mas todas deixavam sujeira na tela ou enviava conteúdo errado para a impressora. Após muita busca, encontrei esse JS super simples de usar e resolve o problema.

Usando a solução

Para funcionar, basta seguir o HTML exibido abaixo e realizar a chamada como demonstrada no JS.

Biblioteca JS responsável para gerar a impressão printThis
Esta biblioteca não é de minha autoria e todos os direitos podem ser visto no código fonte do mesmo.

Show me the code.

Abaixo temos o exemplo do HTML usando Bootstrap 3.

<div class="screen">
    <div>
        <!-- CONTEUDO DO SITE -->
    </div>
    <div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <!-- CONTEUDO DO MODAL -->
    </div>
</div>
<div class="printable"></div>

Montando o CSS da pagina para estes elementos

	.printable {
		display: none;
	}
	/* print styles*/
	@media print {
		.printable {
			display: block;
		}
		.screen {
			display: none;
		}
	}

Exemplo de JS, usando jQuery.

$(document).ready(function () {
    $("#btnPrint").click(function () {
        //get the modal box content and load it into the printable div
        $(".printable").html($("#myModal").html());
        $(".printable").printThis();
    });
});

Estes trechos de código devem fazer parte de sua solução. Quanto a organização, fica a encardo do desenvolvedor resolver e tomar as devidas decisões.

Ainda tem duvidas, então segue um exemplo completo

Montei um exemplo completo de utilização:
Peguei o template Base do Bootstrap 3 e mudei para as chamadas dos scripts do site deles para meu próprio servidor. Se algum link sair do ar me avise que eu atualizo aqui o exemplo.
Este código foi testado no Google Chrome e funcionou perfeitamente.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Print Modal</title>
        <!-- Bootstrap core CSS -->
        <link href="http://leandrolisura.com.br/wp-content/uploads/2017/11/bootstrap.min_.css   " rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 50px;
            }
            .starter-template {
                padding: 40px 15px;
                text-align: center;
            }
            .printable {
                display: none;
            }
            /* print styles*/
            @media print {
                .printable {
                    display: block;
                }
                .screen {
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Leandro Lisura</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Imprimindo Modal</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <div class="screen">
                <div>
                    <div class="starter-template">
                        <h1>Conteudo do site vai aqui.</h1>
                        <p class="lead">
                            Use qualquer coisa que quiser.<br> Qualquer HTML que quiser pode colocar aqui.
                        </p>
                        <p>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Minha Modal</button>
                        </p>
                    </div>
                </div>
                <div class="modal fade bs-example-modal-sm" tabindex="-1"
                     role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content" style="text-align: center;">
                            <br> Isso é o que eu quero imprimir.<br> E somente isso. Nada mais do resto. <br> <br>
                            <div class="col-md-11" style="text-decoration: underline!important; font-weight: bold; font-size: 12pt!important; text-align: center;">
                                <img src="http://leandrolisura.com.br/wp-content/uploads/2017/11/download.jpg"/>
                                LEANDRO LISURA
                            </div>
                            <button type="button" class="btn btn-primary" id="btnPrint">Imprimir esta modal</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="printable"></div>
        </div>
        <!-- /.container -->
        <!-- Bootstrap core JavaScript -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="http://leandrolisura.com.br/wp-content/uploads/2017/11/jquery.min_.js"></script>
        <script src="http://leandrolisura.com.br/wp-content/uploads/2017/11/bootstrap.min_.js"></script>
        <script src="http://leandrolisura.com.br/wp-content/uploads/2017/07/printThis.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btnPrint").click(function () {
                    //get the modal box content and load it into the printable div
                    $(".printable").html($("#myModal").html());
                    $(".printable #btnPrint").remove();
                    $(".printable").printThis();
                });
            });
        </script>
    </body>
</html>

Imprimindo somente em metade da folha

Recebi um e-mail outro dia pedindo uma ajuda para enviar para impressora usando somente metade da folha. Assim é possível cortar a folha ao meio e utilizar novamente ou simplesmente virar de ponta cabeça e ganhar mais uma área de impressão.

A minha solução para este problema segue abaixo.

Mudança no HTML – Espaço definido para cada Div no momento da impressão

            <div class="printableFull" style="width: 100%">
            	<div class="printableLeft" style="width: 50%"></div>
            	<div class="printableRight" style="width: 50%"></div>
            </div>

Mudança no Javascript – Onde vou jogar o conteúdo e o que vou enviar para imprimir

$(".printableLeft").html($("#myModal").html());
$(".printableLeft #btnPrint").remove();
$(".printableFull").printThis();

Mudança no CSS – Atualização dos nomes das classes.

    .printableFull {
        display: none;
    }
    /* print styles*/
    @media print {
        .printableFull {
            display: block;
        }
        .screen {
            display: none;
        }
    }

Como sempre.
Qualquer dúvida ou dicas, entre em contato: leandrolt@gmail.com

10 comments for “Imprimir modal usando JS e Bootstrap 3

  1. Anderson
    19/11/2015 at 23:28

    Não consegui utilizar vc pode mostrar como vinculou o jquery no botao?

    • lisura
      20/11/2015 at 16:00

      Anderson.
      Muito obrigado pelo seu comentário.
      Realmente faltou uns pequenos detalhes que são um pouco chatos.
      Eu montei um exemplo completo de funcionamento que já esta disponível no próprio post.

      Qualquer problema entre em contato.

  2. 13/06/2016 at 13:22

    Lisura:
    Parabéns pelo trabalho de seu site! Tem me ajudado muito!
    Abri a página HTML com as informações a imprimir e o botão IMPRIMIR. Clicando neste botão, abriu uma página modal e novamente o botão IMPRIMIR ESTA PÁGINA. A impressão saiu 100%
    Perguntas:
    1) Tem como clicar no botão IMPRIMIR da página HTML, criar a modal e já enviar para a impressora?
    2) Após a impressão, a página modal fica aberta. Tem como fecha-la automaticamente após impressão?
    3) Da mesma maneira, tem como retornar ao HTML uma informação de página impressa e fechar esta página automaticamente, retornando para um index?
    Agradeço sua atenção
    Atenciosamente com forte abraço
    Nogueira
    nogueira_jr@ig.com.br

    • lisura
      30/08/2016 at 09:50

      Respondendo suas duvidas.
      1 – Não acho que tem como remover a janela padrão de sistema. Imagino que isso é obrigatório para o usuário poder escolher a impressora e opções de impressão.
      2 – Acredito que ao final da ação do botão print você pode colocar uma ação para fechar a modal.
      $(“#btnPrint”).click(function() {
      $(“.printable”).html($(“#myModal”).html());
      $(“.printable #btnPrint”).remove();
      $(“.printable”).printThis();
      $(“#myModal”).hide(); // Adicionar esta linha ao final deve funcionar. Não testei
      });
      3 – Acredito que sim, da mesma maneira que foi feito na resposta 2. Mas você vai ter que realizar algumas simulações antes.

      Espero ter ajudado.
      att

  3. Klewds
    11/07/2017 at 12:59

    Bom dia Leandro uma beLisura este seu trabalho.
    A biblioteca de impressão printThis está fora do ar.

    • lisura
      19/07/2017 at 01:05

      Claudiney. Obrigado pelo seu comentário. Tive alguns problemas com servidor e acabei perdendo alguns arquivos.
      Em todo caso já arrumei o e agora esta tudo certo.

  4. william ribeiro de oliveira
    28/11/2017 at 17:07

    Boa tarde Leandro,

    Parabens pelo seu trabalho, otima biblioteca, salvou minha vida.

    Gostaria de adcionar um logotipo na impressao, ele visualiza, mas nao imprimi a logo

    Fiz assim

    no html ta assim

    SINDSERVA

    no css

    img{
    max-width:20pt;
    max-height:20pt;
    }

    Agradeço se puder me ajudar

    Att
    William

    • lisura
      28/11/2017 at 23:08

      William. Que bom que gostou. Fico feliz em ajudar.
      Eu atualizei meu HTML do exemplo completo. Se puder testar ai na sua maquina seria ótimo.
      No teste que fiz no Chrome, funcionou. O logo aparece na folha de impressão.
      Qualquer nova duvida pode entrar em contato.

  5. william ribeiro de oliveira
    28/11/2017 at 17:12

    html esta assim, esquei de comentar:

    ” SINDSERVA “

    • lisura
      28/11/2017 at 23:09

      Realmente o HTML é bloqueado, mas recebi seu e-mail e já respondi no outro comentário.

Leave a Reply

Your email address will not be published. Required fields are marked *