window.print(); prints one page only

Question

<body style="height: 100%;" onload="window.print();">

So this is my code in PHP, I then echo the html but it only prints the first page. All solutions that I've found say that I should put the height/width to 100% but it is still not working.

already tried

body, html, #wrapper { width: 100%; 
                       height:100%;
                    }
@media print { ... }

this is the print page body you can see the foreach that's why in some cases it's longer than one page. why this is happening ?

<body onload="window.print();">

            <div class="wrapper">
              <section class="invoice">
                <!-- title row -->
                <div class="row">
                  <div class="col-xs-12">
                    <h2 class="page-header">
                      '.$company_info['company_name'].'
                      <small class="pull-right">Date: '.$order_date.'</small>
                    </h2>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- info row -->
                <div class="row invoice-info">

                  <div class="col-xs-12 ">

                    <b>'.$this->lang->line('orderno').':</b> '.$order_data['bill_no'].'<br>
                    <b>'.$this->lang->line('customername').':</b> '.$name['customer_name'].'<br>
                    <b>'.$this->lang->line('customeradress').':</b> '.$name['customer_address'].' <br />
                    <b>'.$this->lang->line('customerphonenumber').':</b> '.$name['customer_phone'].'
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
                </br>
                <!-- Table row -->
                <div class="row">
                  <div class="col-xs-12 table-responsive">
                    <table class="table table-striped">
                      <thead>
                      <tr style="border:1px">
                      <th colspan="2"></th>
                      <th style="text-align:center" colspan="2">'.$this->lang->line('qty').'</th>
                      <th colspan="6"></th>
                    </tr>
                      <tr>
                        <th>'.$this->lang->line('productname').'</th>
                        <th>'.$this->lang->line('price').'</th>
                        <th>Commandée</th>
                        <th>à Livrer</th>
                        <th>'.$this->lang->line('vat').'</th>
                        <th>'.$this->lang->line('discount').'</th>
                        <th>'.$this->lang->line('amount').'</th>
                      </tr>
                      </thead>
                      <tbody>'; 

                      foreach ($orders_items as $k => $v) {

                        $product_data = $this->model_products->getProductData($v['product_id']); 
                        setlocale(LC_MONETARY, 'en_US');
                        $html .= '<tr>
                            <td>'.$product_data['name'].'</td>
                            <td>'.number_format($v['rate'], 3).'</td>
                            <td>'.$v['qty'].'</td>
                            <td>'.$v['qty_liv'].'</td>
                            <td>'.$v['vat'].' %</td>
                            <td>'.$v['discount'].' %</td>
                            <td>'.number_format($v['amount'], 3).'</td>
                          </tr>';
                          if($v['free'] > 0){
                            $html .= '<tr>
                            <td>'.$product_data['name'].'</td>
                            <td>0</td>
                            <td>0</td>
                            <td>'.$v['free'].'</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                          </tr>';
                          }
                      }


                      $html .= '</tbody>
                    </table>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->

                <div class="row">

                  <div class="col-xs-6 pull pull-right">

                    <div class="table-responsive">
                      <table class="table">
                        <tr>
                          <th style="width:50%">'.$this->lang->line('grossamount').':</th>
                          <td>'.$order_data['gross_amount'].'</td>
                        </tr>';


                            $html .= '<tr>
                              <th>'.$this->lang->line('totalvat').':</th>
                              <td>'.$order_data['total_vat'].'</td>
                            </tr>';
                        $html .=' 
                        <tr>
                          <th>'.$this->lang->line('netamount').':</th>
                          <td>'.$order_data['net_amount'].'</td>
                        </tr>
                        <tr>
                          <th>'.$this->lang->line('status').':</th>
                          <td>'.$confiem_status.'</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </section>
              <!-- /.content -->
            </div>
        </body>

in some cases the foreach goes for more then a page so..

did you already test to make your page width to 100% . like: **body, html, #wrapper { width: 100%; }** — Yassine CHABLI, Sep 16 '19 at 10:42
`height: 100%` should be enclosed in a `@media print { ... }` media query — GrafiCode, Sep 16 '19 at 10:47
Possible duplicate of [window.print() is not printing the whole page](https://stackoverflow.com/questions/10845621/window-print-is-not-printing-the-whole-page) — GrafiCode, Sep 16 '19 at 10:47

score 0 · Answer 1 · edited Sep 16 '19 at 11:27

0

Did you try with?:

<body style="height: 100wh;" onload="window.print();">

You can try to explain a little better what the purpose of your code is, and why are you trying to print a lot of pages?

edited Sep 16 '19 at 11:27

Iñigo

1,877
7
25
55

answered Sep 16 '19 at 11:03

Fernando Moya Llasat

1
2

score 0 · Answer 2 · answered Sep 16 '19 at 11:08

This explains some basic ideas for quickly creating a set of print styles using the CSS3 @media syntax.

Granted, many of us now neglect print styles altogether. However, it takes relatively little effort to create something simple that can save users printing all the things from a page they probably don’t need. I’ve recently added some print styles for this site, so hope these may be of use to others:

First off, these styles are best placed at the end of all your other styles. This means they are given greater weight due to the CSS cascade and less likely to be over-written by other rules elsewhere.

First off, using CSS3 media queries, we can target styles for print like this:

@media print {
 /* styles go here */
}

i already have css file with #wrapper{ width: 100%; height: 100%; display: block; } — nab, Sep 16 '19 at 15:03

score 0 · Accepted Answer · answered Sep 16 '19 at 15:07

0

i removed

<link rel="stylesheet" href="'.base_url('assets/dist/css/AdminLTE.min.css').'">

so adminlte css was the cause..

answered Sep 16 '19 at 15:07

nab

568
8
20

window.print(); prints one page only

3 Answers3