How to print keeping the page layout?

Asked

Viewed 1,017 times

0

I’m developing a basic hotel control system. When registering the guest’s entry in a suite, I need to print a "receipt" for the customer, but putting only the function window.print() Javascript is not printing as you would like. The image below shows how the layout page and how the print is coming out (right).

The contents of the entire receipt inside a div containing other Divs inside, as I am assembling the system with Bootstrap and it is necessary to insert the Divs to use the Bootstrap grids (responsive tables). Follows basic structure of div in question:

<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>

Is there any way to have it printed preserving all the layout page the way it is on the left side of the image (HTML, CSS etc)?

php javascript html css

  • If you add the CSS file again indicating media as print, what happens? Something like: <link rel="stylesheet" type="text/css" href="style.css" media="print" />

  • see if these tips can help you https://tableless.com.br/dicas-de-css-para-print/

  • Apparently I can not even, I am since yesterday searching trying to find an alternative and I can not find anything that allows to print colored, it seems that it is standard to print ignore all the CSS of the page.

1 answer

1


To print the way you want, use "col-xs-6" in place of "col-sm-6".

Bootstrap understands printing to be the equivalent of "xs".

  • In doing this, it only keeps the layout of the columns in the print, but does not keep the background color, table header color etc.

  • 1

    There is no way to print background color. This is a limitation of CSS. You can’t print by placing image, or setting background color. The solution I once used was to include a normal image (tag <img> with absolute positioning and z-index: 1 (to get behind). Maybe it helps.

  • Apparently, I can’t, I’ve been doing research since yesterday trying to find an alternative and I can’t find anything. Anyway your Bootstrap tip was already quite valuable.

Browser other questions tagged php javascript html css

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