break content to new page after specific div in print window
Question
I am printing specific content using javascript. Let me show you how i am printing it.
var data='many div and contents';
var html="<html>";
html+="<head>";
html+="<style> body{ font-family:'arial' } .tempcss{ margin:0 0 0 10px !important; } .print_border{ border:1px solid #000; padding:0 20px; } </style>";
html+="</head>";
html+="<body>";
html+= data;
html+="</body>";
html+="</html>";
var printWin = window.open('','','left=0,top=0,fullscreen,toolbar=0,scrollbars=1,status=0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
So it will open new window with content with print option. It will showing ok on new window, but not splitting content properly in print. What i want to do is, I want to add page break in print layout after specific div.
Like this,
<div class="test"></div>
<-- page break here -->
<div class="test"></div>
<-- page break here -->
<div class="test"></div>
<-- page break here -->
So this way when i print page all div will show separately in each page. I don't know how to do it. So please help me on this. Thanks in advance
2 answers
solution1
1 2015-07-28 14:01:00
How about using the page-break-after property in CSS?
@media print {
div.test {
page-break-after: always;
}
}
solution2
1 2017-02-04 17:24:10
add CSS display: block; page-break-before: always; display: block; page-break-before: always;
<div style="display: block; page-break-before: always; "> <!-- your new page content --> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.