Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Export HTML to PDF always align at the bottom of a new page

Tags:

html

css

I am having a problem with export html to PDF. I would like section at the bottom to be always aligned at the bottom of a new page.

Right now this section (when it comes to page break) is aligned at the top of a new page:

enter image description here

Code for that section:

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana"  >
<br>
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
			<tr>
				<td style="width:500px">
					BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				<td>
					BLAGO PREVZEL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				
			</tr>
		  </tbody>
        </table>
</font>
<font face="Verdana" size="1"  >
<br /><br />
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
            <tr>
              <td style="text-align:center">
				<i>
					testting d.o.o., testing, ID za DDV: testing, matična št.: testing
					<br>
					tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
					<br>
					Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
					<br>
					Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
				</i>
              </td>
            </tr>

			</tbody>
        </table>
</font>	
</div>

Here is my code for the whole page (including section at the bottom which jumps into new page at page break):

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
                                <th>Interna številka</th>
                                <th>Prodana koda</th>
                                <th>Količina</th>
                                <th>EnM</th>
                                <th>Cena brez DDV</th>
                                <th>Vrednost brez DDV</th>
                                <th>DDV</th>
                                <th>Znesek DDV</th>
                                <th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana"  >
<br>
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
			<tr>
				<td style="width:500px">
					BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				<td>
					BLAGO PREVZEL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				
			</tr>
		  </tbody>
        </table>
</font>
<font face="Verdana" size="1"  >
<br /><br />
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
            <tr>
              <td style="text-align:center">
				<i>
					testting d.o.o., testing, ID za DDV: testing, matična št.: testing
					<br>
					tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
					<br>
					Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
					<br>
					Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
				</i>
              </td>
            </tr>

			</tbody>
        </table>
</font>	
</div>
like image 401
FrenkyB Avatar asked Feb 27 '17 07:02

FrenkyB

People also ask

How do I move something to the bottom of the page in HTML?

Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.

How do I align an element to the bottom?

To align the div content to the bottom, use position: relative to the container class and position: absolute to the div element.

How do I align everything to the center in HTML?

To just center the text inside an element, use text-align: center; This text is centered.

3 Answers

I just moved the table holding contact info at the bottom of the page as a new:

<tr><td colspan="2"></td></tr>

to the table we are going to stick it to the bottom of the page while printing.

Then you need to only add a style rule for @media print, like this:

@media print{
  table#stickToFooter{
    position: fixed;
    bottom: 0;
  }
}

Say, I didn't manipulate you code in other parts, but just as a best-practice rule, please try to avoid surrounding none-inline level elements in inline tags. I mean it'd be much better if you set table's font-family & size using these styling elements:

table{
  font-family: Verdana, sans-serif;
  font-size: 10px
}

than enclosing it inside a <font face="Verdana" size="1">...</font> tag. Thanks in advance.

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<style>
        @media print{
            table#stickToFooter{
                position: fixed;
                bottom: 0;
            }
        }
</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
                                <th>Interna številka</th>
                                <th>Prodana koda</th>
                                <th>Količina</th>
                                <th>EnM</th>
                                <th>Cena brez DDV</th>
                                <th>Vrednost brez DDV</th>
                                <th>DDV</th>
                                <th>Znesek DDV</th>
                                <th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>

<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana"  >
<br>
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
			<tr>
				<td style="width:500px">
					BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				<td>
					BLAGO PREVZEL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				
			</tr>
<tr>
                <td colspan="2" style="text-align:center; font-size: 10px;">
                    <i>
                        testting d.o.o., testing, ID za DDV: testing, matična št.: testing
                        <br>
                        tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
                        <br>
                        Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
                        <br>
                        Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
                    </i>
                </td>
            </tr>
		  </tbody>
        </table>
</font>
</div>
like image 95
BehradKhodayar Avatar answered Nov 01 '22 02:11

BehradKhodayar

I used JS for solving your problem and make minor changes in your code. You can look at it, I marked my changes with <--EDIT--> comment.

I assumed, that your problem occur when either of your 'Type of goods' table or 'DDV' table get too high to fit on one page with your 'signature' section.

My JS script use function to check height of those tables, make calculation, and if combined height is bigger than certain treshold (825px) it manualy break page. After that, it set margin for your 'signature' section to move it at the bottom of new page (margin wary from 1110px for EDGE&FFOX to 1160 for CHROME).

Note, that this changes will take effect only for "print" version (i used separate <.style> for @media print) and are not visible in web wersion.

I hope you will find it usefull.

CODE:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--EDIT-->
<!--you can test different height setups for #tblArticles to see how it behaves /more than 825 will triger page break ;-)  -->
<style>
#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%; }
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}

#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}
</style>


<!--container for js function fun() to put new css rule for print if condition is met (see <script> at the bottom)-->
<style id="printStyle"><!--EDIT-->
</style><!--EDIT-->

</head>


<!-- run function fun() after page is loaded and table height is calculated -->
<body onload="fun()"><!--EDIT-->


<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
                                <th>Interna številka</th>
                                <th>Prodana koda</th>
                                <th>Količina</th>
                                <th>EnM</th>
                                <th>Cena brez DDV</th>
                                <th>Vrednost brez DDV</th>
                                <th>DDV</th>
                                <th>Znesek DDV</th>
                                <th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>

<!--i marked this element with ID = middleSection (for script)-->
<div id="middleSection" style='page-break-inside:avoid;margin-bottom: 30px;'><!--EDIT-->
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>


<!--i added this to manualy break page when needed by script-->
<div id="break" style="line-height:1px;">&nbsp;</div><!--EDIT-->

<!--i marked this element with ID = bottomSection (for script)-->
<div id="bottomSection" style='page-break-inside:avoid;'><!--EDIT-->

<font face="Verdana"  >
<br>
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
			<tr>
				<td style="width:500px">
					BLAGO DOSTAVIL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				<td>
					BLAGO PREVZEL:&nbsp;______________________<br/><br/>
					Podpis<br/><br/>
					Datum:&nbsp;______________________
				</td>
				
			</tr>
		  </tbody>
        </table>
</font>
<font face="Verdana" size="1"  >
<br /><br />
        <table cellspacing="0" cellpadding="0" style="width:900px;">
          <tbody>
            <tr>
              <td style="text-align:center">
				<i>
					testting d.o.o., testing, ID za DDV: testing, matična št.: testing
					<br>
					tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
					<br>
					Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
					<br>
					Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
				</i>
              </td>
            </tr>

			</tbody>
        </table>
</font>	
</div>


</body>

<!--script-->
<!--EDIT-->
<script>
function fun()
{ 
	var x = document.getElementById("tblArticles").scrollHeight; //825max for A3 / A4 /A5
	var y = document.getElementById("middleSection").scrollHeight; //have 180px, but I suppose it height can wary - in dependcy on number of 'Stopnja' of 'DDV' you have in Slovenia?   
	var z = document.getElementById("bottomSection").scrollHeight; //have 224px, will not change, i suppose.
	
	if ( x+y > 825 ) //if tblArticles height + middleSection height > 825px, break page and move your bottom section to be aligned (i am using margin-top for that) at the bottom of a new page. 
	{
		//USE:
		//1160px for EDGE & FIREFOX
		//1110px for CHROME
		//SAFARI & IE11 not tested, you must figure out..  ;-)
		//It is possible to write a function for detection which browser is being used, but if only specific browser will be used in your use case, then there is no need for that.
		document.getElementById("printStyle").innerHTML="@media print {#break {page-break-before:always;} #bottomSection {margin:1110px 0px 0px 0px;} }"
	}
}
</script>

</html>
like image 4
digiMARAUDER Avatar answered Nov 01 '22 01:11

digiMARAUDER

I used JavaScript to measure page height then decide to assign a transparent image height. So if the total page height is less than 1000px, then height of transparent image is zero and page-break-before:avoid are assumed, if the height of page is more than 1000px, height of transparent image will be 800px and page-break-before:always. So the section you want, goes to the bottom of next page. Below are changes into your code:

add #breakerdiv { page-break-before:always;} to <style>.

Define <div id="calc"> around above table, I mean <table id='tblArticles'>.

Change <div style='page-break-inside:avoid;vertical-align:bottom;'> to <div id="breakerdiv">.

Add 

<img id="breaker" src="transparent-image.png" style="height: 10px; width: 400px;
position: relative;">

just after <div id="breakerdiv">. Use one transparent image on your own.

And add this <script> before </body>

<script>

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

  if(height < 1000){document.getElementById("breaker").style.height="0";
                    document.getElementById("breakerdiv").style.pageBreakBefore="auto"};

  if(height > 1000){document.getElementById("breaker").style.height="800px"};

</script>

I assumed your options are just one or two sheet. Rather than that, you should modify <script> for other heights.

like image 3
ata Avatar answered Nov 01 '22 00:11

ata
Sign in to Comment

Related questions

Real Time Streaming to HTML5 (with out webrtc) just using video tag
Mirroring a path in SVG
Are Meta Keywords Case Sensitive? [closed]
How is 'reader mode' in Firefox triggered?
Correct XPath query to fetch div inner text
Twitter Bootstrap navbar float right moves div to new line
Adding a line break in the title attribute [duplicate]
Canvas setLineDash and lineDashOffset NOT resetting in iOS/Safari?
Dynamically resize iframe
If Google's homepage is so minimal, why is the source hundreds of lines of code? [closed]
CORS HEADERS present only on preflight or every request
AngularJS binds unsafe:javascript:void(0) when value is javascipt:void(0)
HTML textarea spellcheck: How to tell if user makes spelling errors
How to: Reduce font-size if a line breaks
ASP.NET MVC Apply different DisplayFormat's for Edit and Display modes
Is it possible to overlay tr with transparent color and text?
Properly sizing and aligning the flex item(s) on the last row
How to use Flex CSS and simulate a rowspan 2 and colspan 2
Flexbox not working properly on Firefox but okay on Chrome & Safari
How to merge and clean 2 css files with overlapping selectors/properties?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!