0

Estou desenvolvendo um sistema básico de controle hoteleiro. Ao registrar a entrada do hóspede em uma suíte, preciso imprimir um "recibo" para o cliente, porém colocando somente a função window.print() do JavaScript não está imprimindo como gostaria. A imagem abaixo mostra como está o layout da página e como está saindo a impressão (direita).

O conteúdo do recibo todo dentro de uma div contendo outras DIVs dentro, pois estou montando o sistema com Bootstrap e é necessário ir inserindo as divs para utilizar as grids do Bootstrap (tabelas responsivas). Segue estrutura básica da div em questão:

<div id="recibo" class="container-fluid">
    <div class="row" style="background-color:#d7d8da;">
        <div class="col-md-12 text-center">Comprovante de Entrada em Suíte</div>
    </div>
    <div class="row" style="background-color: initial;">
        <div class="col-sm-12 text-center">
            <br>
        </div>
    </div>  
    <div class="row" style="background-color: initial;">
        <div class="col-sm-6 text-center">
            <b>Número da Suíte</b>
        </div>
        <div class="col-sm-6 text-center">
            <?php
                echo $num_suite;
            ?>
        </div>
     </div>
</div>

Há alguma forma de mandar imprimir preservando todo o layout da página do jeito que está no lado esquerdo da imagem (HTML, CSS etc)?

3
  • Se você adicionar novamente o arquivo CSS indicando media como print, o que acontece? Algo como: <link rel="stylesheet" type="text/css" href="style.css" media="print" />
    – Woss
    Commented 20/05/2017 às 23:12
  • veja se essas dicas podem lhe ajudar tableless.com.br/dicas-de-css-para-impressao
    – user60252
    Commented 21/05/2017 às 0:07
  • Pelo visto não dá mesmo, estou desde ontem pesquisando tentando encontrar uma alternativa e não encontro nada que permita imprimir colorido, parece que é padrão a impressão ignorar todo o CSS da página.
    – Leandro
    Commented 21/05/2017 às 18:26

1 Resposta 1

1

Para imprimir do jeito que você quer, utilize "col-xs-6" no lugar de "col-sm-6".

O Bootstrap entende a impressão como sendo o equivalente ao "xs".

3
  • Fazendo isso, só mantém o layout das colunas na impressão, mas não mantém a cor de fundo, a cor do cabeçalho da tabela etc.
    – Leandro
    Commented 20/05/2017 às 23:30
  • 1
    Não tem como imprimir cor de fundo. Isso é uma limitação do CSS. Não dá pra imprimir colocando imagem, nem setando cor de fundo. A solução que eu usei uma vez foi incluir uma imagem normal (tag <img> com posicionamento absoluto e z-index: 1 (para ficar por trás). Talvez ajude. Commented 21/05/2017 às 0:14
  • Pelo visto não dá mesmo, estou desde ontem pesquisando tentando encontrar uma alternativa e não encontro nada. De qualquer forma a sua dica do Bootstrap já foi bastante valiosa.
    – Leandro
    Commented 21/05/2017 às 18:24

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 .