none
Div para Imprimir RRS feed

  • Pergunta

  • Boa Tarde, estou utilizando um código em JS que funciona muito bem para imprimir:

    <script type="text/javascript">
            function printdiv(divID) {
                var headstr = "<html><head><title></title></head><body>";
                var footstr = "</body>";
                var newstr = document.all.item(divID).innerHTML;
                var oldstr = document.body.innerHTML;
                document.body.innerHTML = headstr + newstr + footstr;
                window.print();
                document.body.innerHTML = oldstr;
                return false;
            }
        </script>

    Porém preciso imprimir, títulos e alguns grids. Então criei no CSS o print e no print, para informar o que irá aparecer na impressão, e coloco tudo na div "divID".

    Só que quando o grid tem muitos dados, seja ele aparecendo com barra de rolagem, ou paginação, imprimi somente aquela página, não imprimi o grid todo, com todas as informações. Gostaria de saber como proceder neste caso. O estranho é que quando eu coloco somente o grid nesta div, ai ele imprimi normal, independente da quantidade de registros. Obrigado.

    segunda-feira, 24 de abril de 2017 17:49

Respostas

  • Copiei o CSS e alterei os seletores no CSS pois o código no jsfiddle não tem as mesmas coisas.

    https://jsfiddle.net/Lygc4c67/4/

    Mesmo assim não tive o mesmo comportamento que você descreve. Para não ficar atrasando sua atividade (considerando que deve ser algo do trabalho), sugiro dividir esta tela e criar uma separada para a visualização de impressão que ao ser carregada já invoca a função de impressão.


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 10 de maio de 2017 15:07

Todas as Respostas

  • Ainda não consegui resolver este problema.
    quinta-feira, 27 de abril de 2017 12:17
  • Mariana, você está aplicando algum CSS na div ou no container desta div?

    Há algumas propriedades que podem fazer o conteúdo ser ignorado. Se tiver como criar um código de teste no https://jsfiddle.net/ ajudaria muito no diagnóstico.


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quinta-feira, 27 de abril de 2017 12:24
  • Boa Tarde Juliano, Fiz conforme falou, eu coloco tudo dentro da divID e informo print para o que quero que apareça na impressão e no-print para o que eu quero que não apareça. https://jsfiddle.net/jzze9gb6/

    Neste acaso aparece a paginação, que o correto era aparecer o grid preenchido todo, se eu faço com barra de rolagem, acontece a mesma coisa, não aparece o conteúdo do grid, e sim a tela, se eu coloco somente o grid dentro do Div, funciona certo, aparece todo o preenchimento do grid, independente da paginação ou da barra de rolagem. 

    quinta-feira, 27 de abril de 2017 18:02
  • Mariana, converti o código ASP.net que você deixou no jsfiddle para um HTML simulado e ele gerou as 3 páginas como eu previa.

    Compare com o HTML gerado em seu browser a partir da sua aplicação e veja as diferenças:

    https://jsfiddle.net/jzze9gb6/1/


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quinta-feira, 27 de abril de 2017 18:36
  • Juliano será que o não ocorreu o problema com vc, por causa da paginação do grid ? 

    Eu fiz o teste de várias formas, se o grid gera 3 paginas por exemplo, e eu coloco somente o grid dentro da div, ok, imprimi as 3 páginas corretas, porém se eu coloco todo o html, e seto para imprimir ou não, se tiver paginação ele aparece somente a primeira pagina, e se ele tiver scrollbar ele aparece aonde está selecionado o scrollbar.

    quinta-feira, 27 de abril de 2017 18:40
  • Infelizmente, ou ele imprimi somente o grid correto, ou ele imprimi os títulos e outras coisas, porém não imprimi o grid correto, o problema está que as vezes irei precisar imprimir mais de um grid, pois tem páginas que são separadas por 2 grids, por exemplo, retirada  e depósito. Não sei como proceder. Se existe alguma outra forma. Obrigado.
    quarta-feira, 3 de maio de 2017 11:09
  • Olá Mariana,

    Não sei da confidencialidade das informações das telas, mas você tem duas possibilidades para tentarmos te ajudar melhor. Abrir o site normalmente no navegador, exibir o código fonte e replicar exatamente o HTML, JS e CSS no JSFiddle para termos um teste real.

    Ou, abrir o site normalmente no navegador e mandar Salvar a página completa, daí compartilhar o arquivo. Não é garantido, mas talvez fique mais fácil replicar o comportamento.


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 3 de maio de 2017 11:31
  • Bom dia, olha quando eu exibo normal:

    quando clico em imprimir, ele aparece dessa forma:

    Fiz conforme me orientou, fiz login no site, e coloquei exibir código fonte, segue como ficou:

    https://jsfiddle.net/Lygc4c67/

    Obrigado.

    quarta-feira, 3 de maio de 2017 11:52
  • Como deveria ficar ao clicar no imprimir? A imagem está mostrando o grid sem formatação mas com os mesmos dados de quando é visualizado normalmente.

    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 3 de maio de 2017 12:13
  • O certo seria aparecer o grid preenchido como um todo, sem paginação,a mesma coisa ocorre, quando ele está com barra de rolagem, ai está o problema, pois se coloco somente o grid na div, ele imprimi o grid todo, todos os dados, sem a paginação.
    quarta-feira, 3 de maio de 2017 12:19
  • Mariana, 

    Pela sua função de impressão você pega o HTML da DIV com ID = "divID", porém esta é a mesma que é exibida na tela, ou seja, não possui todos os registros sem a paginação.

    Não sei se ainda há diferença no jsfiddle em relação ao seu código, mas do jeito que está no jsfiddle, não vejo como a impressão sem paginação funcionaria.

    Fiz uma atualização no código que você mandou, incluindo uma div inicialmente oculta no final do HTML que contém uma simulação da tabela com todos os registros (em produção sugiro que isto seja carregado via Ajax para evitar carga desnecessária de todos os registros). Daí alterei a chamada da função para apontar para esta nova DIV. 

    Veja se é o comportamento que deseja: https://jsfiddle.net/Lygc4c67/3/


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 3 de maio de 2017 13:07
  • Juliano vou fazer o teste, e te falo se vai funcionar, obrigado por enquanto.
    quarta-feira, 3 de maio de 2017 19:38
  • Mariana C. Costa

    Ficamos no aguardo de um retorno.

    Atenciosamente,


    Guilherme Macedo S

    Esse conteúdo é fornecido sem garantias de qualquer tipo, seja expressa ou implícita

    TechNet Community Support

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    sexta-feira, 5 de maio de 2017 20:22
    Moderador
  • Tive um problema com minha máquina no FDS, estarei realizando os testes, e amanha posto se deu certo, obrigado.
    segunda-feira, 8 de maio de 2017 20:08
  • Entendido Mariana C. Costa

    No aguardo.

    Atenciosamente,


    Guilherme Macedo S

    Esse conteúdo é fornecido sem garantias de qualquer tipo, seja expressa ou implícita

    TechNet Community Support

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    terça-feira, 9 de maio de 2017 16:20
    Moderador
  • Juliano não sei como proceder, pois de todas as formas não imprimi, o único jeito de imprimir o grid sem paginação ou barra de rolagem, é colocando somente ele na div, tentei criar duas divs para imprimir, uma pra todo o html e uma somente pro grid, porém também não deu certo. Colocando só na tabela, ok, funciona certo, mas necessito imprimir o grid.  Então a solução de colocar tudo dentro da div, e colocar print e no print, foi uma alternativa que vi na internet, porém que não deu certo. Por isso estava todos os dados dentro de uma unica div.
    terça-feira, 9 de maio de 2017 19:23
  • Mariana,

    Não sei se o que eu havia entendido da sua dúvida está correto ou se estamos tendo uma falha de comunicação por causa da explicação via texto, mas infelizmente não consigo pensar em outras sugestões analisando apenas fragmentos do seu código.

    O código que colocou no jsfiddle só contém os dados da primeira página do grid, então repliquei o conteúdo diversas vezes dentro de outra DIV e ao clicar no botão para imprimir fiz a copia deste conteúdo para o document.body, assim como você já fazia, então o navegador mostrou corretamente a quebra de páginas devido ao grid com conteúdo extenso.


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    terça-feira, 9 de maio de 2017 19:39
  • Juliano, então quando os dados não estão formatados, igual você fez, funcionou corretamente, porém quando o grid está populado com paginação ou barra de rolagem, não funciona. 

    Por exemplo, neste formulário aparece com barra de rolagem:

    Somente este grid, está na DIV para imprimir, então aparece correto:

    <div id="divID">
        <h1 color: green">
                    <asp:GridView ID="GridView3" runat="server" CellPadding="7" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" AllowPaging="True" OnPageIndexChanging="GridView3_PageIndexChanging" PageSize="1000000">
                        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                        <Columns>
                            <asp:BoundField DataField="nome" HeaderText="Nome" SortExpression="nome"></asp:BoundField>
                            <asp:BoundField DataField="observacao" HeaderText="Observação" SortExpression="observacao"></asp:BoundField>
                            <asp:BoundField DataField="vencimento" HeaderText="Vencimento" SortExpression="data" DataFormatString="{0:d}"></asp:BoundField>
                            <asp:BoundField DataField="data_pagamento" HeaderText="Data Pagamento" SortExpression="data_pagamento"></asp:BoundField>
                            <asp:BoundField DataField="forma_pagamento" HeaderText="Forma Pagamento" SortExpression="forma_pagamento"></asp:BoundField>
                            <asp:BoundField DataField="valor" HeaderText="Valor" SortExpression="valor"></asp:BoundField>
                        </Columns>
    
                        <EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#E9E7E2" />
                        <SortedAscendingHeaderStyle BackColor="#506C8C" />
                        <SortedDescendingCellStyle BackColor="#FFFDF8" />
                        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                    </asp:GridView>
             </h1>
            </div>

    Só que eu preciso imprimir além do grid, outros dados da página, e então pesquisei na net, e vi a opção de colocar tudo em uma div, e ir controlando pelo css o que imprimir ou não imprimir, só que se faço isso, o grid aparece assim:

    Existe uma outra forma de imprimir, que você possa me sugerir ? estou pesquisando um pouco sobre printArea, não sei se é o mesmo contexto, um amigo meu que indicou.

    Obrigado.

    terça-feira, 9 de maio de 2017 19:58
  • Como está o CSS dessa página? Vou tentar simular naquele jsfiddle e ver se descubro algo mais.

    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 10 de maio de 2017 00:20
  • #GridView3 {
        width: 98%;
        word-wrap: break-word;
        table-layout: fixed;
        margin-left: 1%;
        margin-right: 1%;
        font-size: 1em;
        font-size: 15px;
    }
    .grid-atualiza {
        width: 100%;
        height: 400px;
        overflow-X: hidden;
    }

    grid-atualiza, é onde seto o tamanho do grid para gerar a barra de rolagem.

    E o para imprimir e não imprimir é esse:

    @media print {
        .print {
            display: block;
        }
    
        .no-print {
            display: none;
        }
    }
    

    Obrigado Juliano.

    quarta-feira, 10 de maio de 2017 11:33
  • Copiei o CSS e alterei os seletores no CSS pois o código no jsfiddle não tem as mesmas coisas.

    https://jsfiddle.net/Lygc4c67/4/

    Mesmo assim não tive o mesmo comportamento que você descreve. Para não ficar atrasando sua atividade (considerando que deve ser algo do trabalho), sugiro dividir esta tela e criar uma separada para a visualização de impressão que ao ser carregada já invoca a função de impressão.


    Juliano Nunes - http://linkedin.com/in/julianonunes

    Lembre-se de clicar em "Votar como útil" e "Marcar como Resposta" caso tenha respondido sua dúvida.

    Remember to "Vote as Helpful" and "Mark as Answer" if your question has been answered.

    quarta-feira, 10 de maio de 2017 15:07
  • Juliano, infelizmente ainda não consegui fazer da forma que eu precisava, vou dar mais uma pesquisada com calma, de qualquer forma obrigado por toda a sua ajuda. Se eu achar algo pra resolver o meu problema, volto a postar, senão vou fazer conforme me sugeriu.
    quarta-feira, 10 de maio de 2017 20:22