Always there is one extra empty page when printing

Question

I'm working on an application to print a page. There is ALWAYS a blank extra page. I tried those solutions listed here but the problem is still present.

My print function is as follows:

// divID1 = the base, big div
// divID2 = some iframe inside divID1 (a table)
// value = the title of the print page
function printDiv3(divID1,divID2,value)
{
    var func = "<style>td,th {padding:10px}
        html, body{color:#000; height: 90%}
        h2{font-size:18px;}
        h4{font-size:16px;text-align:center;margin-bottom:-40px}
        input,select{background-color:#000;border:thin solid #999999;}
       .footer{position:absolute;bottom:0px;left:0px;right:0px,text-align:center;
            width:100%;font-size:12px;margin-bottom:0px}
       .sign{float:right;text-align:right;direction:rtl}</style>";
    var header = "<h4>" +  value 
      + "</h4><img align='right' width='150' src='images/logo.png'><br><br><br><br>";
    var footer = "<div class='footer' align='center'>Tel. address, etc </div> ";
    var sign = "";

     //Get the HTML of div  + uframe          
    var divElements = document.getElementById(divID1).innerHTML
        + "<div style='width:100%;height:900px;position:absolute;top:325px'>"
        + window[divID2].document.body.innerHTML + "</div>" ;

    //Get the HTML of whole page
    var oldPage = document.body.innerHTML;

    //Reset the page's HTML with div's HTML only
    document.body.innerHTML = 
      "<html><head><title></title>" + func + "</head><body>"
       + header  +"<table border=1>" + divElements + "</table>"
       + sign + footer  +"</body></html>";

    //Print Page
    window.print();
    //Restore orignal HTML
    document.body.innerHTML = oldPage;     
     window.close();   
 }

My page structure is as follows:

<div  id="example" > <!-- base div -->
<table border='1' width="100%" class="imagetable"  id="imagetable1"  >
  ...
</table>
<!-- the iframe -->
<table border='0' width="100%" class="imagetable">
<tr><td><div>
<iframe id="iframe_form" src="S.php" frameborder=0  style="width:100%;height:400px" ></iframe>
</div></td></tr>
</table>
<table>
    ...
</table>
</div>

Is the cause of problem that the div contains three consequent table?

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

I think you shouldn't do like this. The better ay is convert your html content in pdf. If you stay in html you should respect print format (as A4) to expect what it work... If you don't mastered the content of iframe, take a javascript screenshot ^^: Using HTML5/Canvas/JavaScript to take screenshots

I hope it help you. See you.

edited May 23 '17 at 12:28

Community

1
1

answered Dec 28 '14 at 08:57

YannXplorer

105
1
5

What do you mean by converting to pdf? How can I do this? – FindOut_Quran Dec 28 '14 at 09:45
You have to export content informations of the html in pdf format. You can see the following post : http://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript – YannXplorer Dec 28 '14 at 10:46

Always there is one extra empty page when printing

1 Answers1