打印时始终有一个额外的空白页面

时间:2014-12-28 08:34:05

标签: javascript html printing

我正在开发一个打印页面的应用程序。总是有一个空白的额外页面。我尝试了这些解决方案listed here,但问题仍然存在。

我的打印功能如下:

// 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();   
 }

我的页面结构如下:

<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> 

问题的原因div包含三个结果table

1 个答案:

答案 0 :(得分:1)

我认为你不应该这样做。更好的是以PDF格式转换您的HTML内容。 如果你留在HTML中你应该尊重打印格式(如A4),以期待它的工作... 如果你没有掌握iframe的内容,请拍一个javascript截图^^: Using HTML5/Canvas/JavaScript to take screenshots

我希望它可以帮到你。 见到你。