Content loses formatting when viewing print asp.net mvc

Question

Content loses formatting when viewing print asp.net mvc

Navigation

#1 by (0 votes)

0

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

Thank you

<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

asked by anonymous 13.01.2016 / 17:19

1 answer

SQLite database creation on smartphone Change Image Color by clicking button

score 0 · Accepted Answer

To adjust the contents of the div is to maintain 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 looks 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>