I have this very simple code that works with jspdf and html2pdf but for some reason jspdf is not breaking the elements into new pages.
Any help would be appreciated
<!DOCTYPE html>
<html>
<head>
<title>Html2Pdf</title>
<link rel="stylesheet" type="text/css" href="examples.css">
<style>
table {
margin-bottom: 1em;
}
table td {
padding: 3px;
}
.table1 {
border: 1px solid red;
}
.table2,.table2 td {
border: 1px solid silver;
border-collapse: collapse;
}
.table2 td:first-child {
background-color: lightblue;
}
.CSSTableGenerator {
margin: 0px;
padding: 0px;
width: 100%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.CSSTableGenerator table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
}
.CSSTableGenerator tr:last-child td:first-child {
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.CSSTableGenerator tr:hover td {
}
.CSSTableGenerator tr:nth-child(odd) {
background-color: #ffaa56;
}
.CSSTableGenerator tr:nth-child(even) {
background-color: #ffffff;
}
.CSSTableGenerator td {
vertical-align: middle;
border: 1px solid #000000;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 10px;
font-family: Arial;
font-weight: normal;
color: #000000;
}
.CSSTableGenerator tr:last-child td {
border-width: 0px 1px 0px 0px;
}
.CSSTableGenerator tr td:last-child {
border-width: 0px 0px 1px 0px;
}
.CSSTableGenerator tr:last-child td:last-child {
border-width: 0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td {
background: -o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00));
background: -moz-linear-gradient(center top, #ff7f00 5%, #bf5f00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");
background: -o-linear-gradient(top, #ff7f00, bf5f00);
background-color: #ff7f00;
border: 0px solid #000000;
text-align: center;
border-width: 0px 0px 1px 1px;
font-size: 14px;
font-family: Arial;
font-weight: bold;
color: #ffffff;
}
.CSSTableGenerator tr:first-child:hover td {
background: -o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00));
background: -moz-linear-gradient(center top, #ff7f00 5%, #bf5f00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");
background: -o-linear-gradient(top, #ff7f00, bf5f00);
background-color: #ff7f00;
}
.CSSTableGenerator tr:first-child td:first-child {
border-width: 0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child {
border-width: 0px 0px 1px 1px;
}
</style>
</head>
<body>
<div style='position: absolute'>
<h1>Tables</h1>
<table class='table1'>
<tr>
<td>Item</td>
<td>Cost</td>
<td>Description</td>
<td>Available</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
</table>
<div class="html2pdf__page-break"></div>
<div>
<table class='table2'>
<tr>
<td>Item</td>
<td>Cost</td>
<td>Description</td>
<td>Available</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
</table>
</div>
<table class='CSSTableGenerator' style='page-break-before: always'>
<tr>
<td>Item</td>
<td>Cost</td>
<td>Description</td>
<td>Available</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
<tr>
<td>Milk</td>
<td>$1.00</td>
<td>Hello PDF World</td>
<td>Out Of Stock</td>
</tr>
</table>
</div>
<script src='jspdf.debug.js'></script>
<script src='html2pdf.js'></script>
<script>
var pdf = new jsPDF('p', 'pt', 'letter');
var canvas = pdf.canvas;
canvas.height = 96 * 11;
canvas.width=96 * 8.5;;
// var width = 400;
html2pdf(document.body, pdf, function(pdf) {
var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:900px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
//var div = document.createElement('pre');
//div.innerText=pdf.output();
//document.body.appendChild(div);
}
);
</script>
</body>
</html>
JsPDF uses a special HTML tag...
<!--ADD_PAGE-->
...to force a page-break.
Please note that this only applies if using the addHTML method.
I had this exact problem and throwing in the tag worked perfectly.