Hi I am developing web application using angularjs. I have implemented PRINT functionality and when i do control p i am supposed to get one page but i am getting extra blank pages. Below is my html.
<div style="width: 100%;" id="printThis" class="hiddenVal">
<div class="modifyMe"></div>
<img src="images/logo.png" id="logo" alt="Raya Financing Co.">
<table> here goes content </table>
</div>
</div>
Below is my print function
myapp.factory("PrintFactory", ['$location', '$anchorScroll', '$cookieStore', function ($location, $anchorScroll, $cookieStore) {
var print = {};
print.doprint=function()
{
printElement(document.getElementById("printThis"));
var modThis = document.querySelector("#printSection .modifyMe");
modThis.appendChild(document.createTextNode(" new"));
window.print();
return true;
}
return print;
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
}
}
]);
I have added below class in css.
@media hiddenVal {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
adding above class doesnt help out me!
Actually My html page is very big of may be 8 pages but i am trying to print only one part out of it. So is that causing me the issues?
May i know what would be the cause for the above issue? may i get some help to fix this? Thank you