3

eu tenho uma página HTML que funciona como página de relatório.

Ela tem uma tabela que é alimentada pelo banco de dados, entretanto quando existem muitas linhas na consulta então a tabela HTML fica muito grande. Acontece que devido a isto, se eu tentar imprimir a página, a ultima linha da tabela no final da página vai ser "comida" pela divisão do papel.

Gostaria dentão de permitir que o javascript se encarregue de criar linhas vazia a cada intervalo de altura da tabela.

Por exemplo, eu poderia especificar que a cada 500 pixels de altura na tabela, o javascript deveria inserir uma linha vazia.

Porém, não sei como implantar isto.

Alguma sugestão?

Tentativas...

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $(this).style.pageBreakBefore="always";
                        altura = 0;
                    }
                });
            });
        </script>

        <style>
            @media print {
                tr.page-break  { 
                    display: block;
                    page-break-before: always; 
                }
            }   
        </style>
    </head>

    <body>

        <table id='tabela' border=1px;>
            <tr><td>Linha1</td></tr>
            <tr><td>Linha2</td></tr>
            <tr class='page-break'><td>Linha3</td></tr>
            <tr><td>Linha4</td></tr>
            <tr><td>Linha5</td></tr>
            <tr><td>Linha6</td></tr>
            <tr><td>Linha7</td></tr>
            <tr><td>Linha8</td></tr>
            <tr><td>Linha9</td></tr>
            <tr><td>Linha10</td></tr>
            <tr><td>Linha11</td></tr>
            <tr><td>Linha12</td></tr>
            <tr><td>Linha13</td></tr>
            <tr><td>Linha14</td></tr>
            <tr><td>Linha15</td></tr>
            <tr><td>Linha16</td></tr>
            <tr><td>Linha17</td></tr>
            <tr><td>Linha18</td></tr>
            <tr><td>Linha19</td></tr>
            <tr><td>Linha20</td></tr>
            <tr><td>Linha21</td></tr>
            <tr><td>Linha22</td></tr>
            <tr><td>Linha23</td></tr>
            <tr><td>Linha24</td></tr>
            <tr><td>Linha25</td></tr>
            <tr><td>Linha26</td></tr>
            <tr><td>Linha27</td></tr>
            <tr><td>Linha28</td></tr>
            <tr><td>Linha29</td></tr>
            <tr><td>Linha30</td></tr>
            <tr><td>Linha31</td></tr>
            <tr><td>Linha32</td></tr>
            <tr><td>Linha33</td></tr>
            <tr><td>Linha34</td></tr>
            <tr><td>Linha35</td></tr>
            <tr><td>Linha36</td></tr>
            <tr><td>Linha37</td></tr>
        </table>

    </body>
</html>

E...

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('td').click(function () {
                    var indice = $(this).index() + 1;
                    $('tr').each(function (index, element) {
                        $(this).children('td:nth-child(' + indice + ')').toggleClass('no-print');
                    });
                });

                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
                        altura = 0;
                    }
                });

            });
        </script>

        <style>
            .no-print {
                opacity:.5;
            }
            @media print {
                .no-print {
                    display:none;
                }
            }
        </style>

    </head>

    <body>
        <table id="tabela">
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
        </table>
    </body>
</html>
2
  • No primeiro exemplo esta gerando um exception: "Não é possível definir a propriedade 'pageBreakBefore' de referência indefinida ou nula" use jquery para definir a classe: $(this).addClass('page-break'); Commented 15/08/2014 às 15:19
  • O segundo exemplo copiado e colado no fiddle, funciona normalmente... Commented 15/08/2014 às 15:22

3 Respostas 3

6

Você pode fazer com jquery, como no exemplo abaixo:

jsfiddle: http://jsfiddle.net/jaderw/tfmpouse/

var altura = 0;
$('#tabela tr').each(function(index, element){
    altura += $(this).height();
    if (altura > 100) {
        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
        altura = 0;
    }
});

Verifique também uma solução com as propriedades CSS page-break-inside, page-break-after e page-break-before, acho que são mais apropriadas:

Por ex:

  table { page-break-inside:auto }
   tr   { page-break-inside:avoid; page-break-after:auto }
4
  • O código é muito bacana jader, mas a quebra so funciona na primeira vez. Das vezes seguintes que a tabela atinge altura 100, a quebra nao acontece. Infelizmente nao consegui detectar o motivo. Commented 15/08/2014 às 12:33
  • No teste no jsfiddle funciona perfeitamente, você incluiu todo o each? Definiu a var altura = 0 fora da função para ela ficar no escopo global? Commented 15/08/2014 às 12:49
  • sim! inseri toda a estrutura. Commented 15/08/2014 às 13:45
  • cole todo o código fonte da pagina em um pastebin para eu dar uma olhada... Commented 15/08/2014 às 13:48
1

hum, e se então no js(uso jquery) você faça o teste

LOOP PRINCIPAL {
    while( $('table').height() < 500 ) {
        executa o codigo VB que deve conter um loop imprimindo cada linha da tabela
    }
    imprime a linha vazia

}END LOOP PRINCIPAL
4
  • É que na verdade, funciona assim... o cliente pesquisa algo numa aplicação VB6(DESKTOP) e então essa aplicação gera uma página HTML toda preenchida com as colunas ja escritas. Ou seja, nao tenho nenhum codigo de inserção de <tD><TR> dentro da página. O que seria interessante para mim, seria ler o objeto table ja construido e fazer inserções linhas vazias. Commented 14/08/2014 às 16:13
  • então dentro do vb é que ele cria a estrutura 'table' com os td's e tr's a ser impressa? Pq se for, talvez esse tipo de código funcione no VB.
    – Dtag
    Commented 14/08/2014 às 16:16
  • Isso mesmo... porém, dentro do vb não da pra saber quanto espaço a estrutura da tabela vai ocupar entendeu? Entao este processo tem que ocorrer na página HTML. Commented 14/08/2014 às 16:17
  • Editrei a resposta, vê se tem alguma coisa a ver com o que vc quer
    – Dtag
    Commented 14/08/2014 às 16:27
1

Na criação do código HTML você não tem controle a princípio do tamanho das linhas em sua tabela. O que você precisa fazer é para cada linha (individualmente ou usando um style CSS global) definir a sua altura:

<table class='relatorio'>
    <tr>...</tr>
    <tr>...</tr>
</table>

E no CSS:

.relatorio tr { height: 20px; }

Com isso você agora sabe, no momento em que a tabela está sendo gerada, qual o tamanho de cada linha. Com isso você pode manter um contador que armazena o tamanho total da tabela, e quando o tamanho atingir um certo limiar, você pode inserir a quebra de página.

Um detalhe que você tem que prestar atenção: o CSS pode definir exatamente o tamanho das linhas na tela, mas browsers diferentes podem alterar um pouco a medida, então adicionar uma linha em branco pode não ser a melhor das soluções (a primeira / segunda página pode até ficar bem, mas os erros pequenos podem se acumular e causar problemas em páginas subsequentes). Uma melhor solução seria fechar a tabela e começar uma nova tabela na página seguinte. Ou então usar uma ferramenta de geração de relatório própria.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .