JsPdf分页符不起作用 [英] JsPdf page break not working
本文介绍了JsPdf分页符不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个非常简单的代码，可以与jspdf和html2pdf一起使用，但是由于某种原因，jspdf并未将元素分解成新的页面.
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.
任何帮助将不胜感激
<!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使用特殊的HTML标记...
JsPDF uses a special HTML tag...
<!--ADD_PAGE-->
...强制分页.
请注意，这仅在使用addHTML方法时适用.
我遇到了这个确切的问题，把标签扔得很完美.
...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.
这篇关于JsPdf分页符不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
