Content loses formatting when viewing the Asp.net mvc print

Asked

Viewed 608 times

0

I have a page for printing, it was made with bootstrap, I would like to keep the layout with the same formatting, I am doing this way:

thanks

<script>
    function cont(){
       var conteudo = document.getElementById('print').innerHTML;
       tela_impressao = window.open('about:blank');
       tela_impressao.document.write(conteudo);
       tela_impressao.window.print();
       tela_impressao.window.close();
    }
</script>

<div id="print" class="conteudo">

    <br />
    <div class="panel panel-default">
        <div class="panel-heading"><small> Número do Jogo : @TempData["numero_jogo"] </small></div>
        <div class="panel-heading"><small> Vendedor : @TempData["nome_vendedor"] </small></div>

        <div class="panel-heading"><small> Impressão  : @DateTime.Now </small></div>

    </div>



    <div class="list-group">
        <a href="#" class="list-group-item active">
            Detalhe
        </a>

        @if (Model.Count() > 0)
        {
            foreach (var item in Model)
            {
                <a href="#" class="list-group-item"> @Html.DisplayFor(c => item.NUMERO_JOGO)  </a>
            }
        }

    </div>

    <br />

</div>
javascript jquery css asp.net-mvc

1 answer

0


To adjust the contents of the div is to keep the same layout configuration can be done this way.

<script>

    function printDiv() {
        //pega o Html da DIV
     var divElements = document.getElementById('print').innerHTML;
        //pega o HTML de toda tag Body
        var oldPage = document.body.innerHTML;

        //Alterna o body
        document.body.innerHTML =
          "<html><head>  <title></title> </head> <body>  " + divElements + "</body>";

        //Imprime o body atual
        window.print();

        //Retorna o conteudo original da página.
        document.body.innerHTML = oldPage;

    }
</script>

The content stays like this:

<div id="print" >

    <br />
    <div class="panel panel-default">
        <div class="panel-heading"><small> Número do Jogo : @TempData["numero_jogo"] </small></div>
        <div class="panel-heading"><small> Vendedor : @TempData["nome_vendedor"] </small></div>

        <div class="panel-heading"><small> Impressão  : @DateTime.Now </small></div>

    </div>



    <div class="list-group">
        <a href="#" class="list-group-item active">
            Detalhe
        </a>

        @if (Model.Count() > 0)
        {
            foreach (var item in Model)
            {
                <a href="#" class="list-group-item"> @Html.DisplayFor(c => item.NUMERO_JOGO)  </a>
            }
        }

    </div>

    <br />

</div>

Browser other questions tagged javascript jquery css asp.net-mvc

You are not signed in. Login or sign up in order to post.