Menu
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
504
print() method. In the CSS section, inside @media print , select the break-page class and set its page-break-before property to always . The page break will appear before the second heading, After page break when clicking the Print button.
To suggest a page break, add <P style="page-break-before: always"> before the beginning of a new printed page. For example, if you place the following tags on a HTML page and print it using a compatible browser, you will end-up with three pages with the sample text.
You can use this function for print a specific area of web page or full web page content. Use printPageArea() function on onclick event of print button element and provide the content area div ID which you want to print.
Show activity on this post. Then add an empty DIV tag (or any block element that generates a box) where you want the page break. It won't show up on the page, but will break up the page when printing.
How about using the page-break-after property in CSS?
@media print {
div.test {
page-break-after: always;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
