JavaScript – HTML页脚底部的HTML页面在IE中打印出来

我被要求在html网页的每一页的底部找到一个页脚,打印出来(而不是浏览器上的实际页面).你们知道有什么办法吗？ (它应该在IE上工作,只是IE是好的)

我尝试使用固定底部,但内容与页脚重叠.

我尝试使用JavaScript来计算空间并给出一个空的div的高度：正在使用如果底部的页脚％页面高度！= 0,添加所需的差距.但是,底部的页脚和所需的空白区域的值似乎随元素类型的变化而变化.

var printPageHeight = 1900; 
var mFooter = $("#footer-nt");
var bottomPos = mFooter.position().top + mFooter.height();


var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) :       printPageHeight - (bottomPos % printPageHeight );


$("#whiteSpaceToPositionFooter").css("height",remainingGap+"px");

我尝试使用表,除了最后一个以外,对所有页面都很好.

我尝试了几个其他的边距和这样的调整,但他们也没有工作.

我实际上希望页脚只能在打印输出的最后一页的底部显示,如果可能的话.

解决方法

我正在回答我自己的问题,以防其他人需要解决方案.

经过长时间的研究和密集的尝试(主要是试验和错误),我使用以下逻辑仅在最后一页的底部设置页脚：

>在css中：@media print {position：fixed;顶部：0;左：0; z-index -1; }广告IE显示在每个页面的底部,并被z-index发送到背景.
>然而,IE中的文本背景在打印输出中是透明的,因此文本位于页脚之上.所以,在绝对的左上角位置使用1px×1px的白色图像作为图像的背景.
>使用javaScript设置图像的高度和宽度与具有内容的div的高度相同.

HTML：

<body>
    <div id="wrapper"> <!-- not necessary -->
        <img scr="./img/white.png" id="whiteBg" />
        <div id="content">
            <!-- content here -->
        </div>
    </div>
    <div id="footer">
    </div>
</body>

CSS：

@media screen {
    #whiteBg {
        display: none;
    }
}

@media print {
   #whiteBg {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; //to send it to the background
   } 
   #wrapper {
      padding-bottom: (the size of the footer,to make footer visible on last page).
   }
   #footer {
     position: fixed;
     bottom: 0;
   }
}

jQuery的：

@('#whiteBg').height(  $('#content')).height()  );

在每个页面的底部都可以看到,我使用了:(第二种情况)

CSS：

@media print {
   #footer {
     position: fixed;
     bottom: 0;
   }
   body {
     margin: x x y x; (y should reflect the height of the footer);
}

JavaScript – HTML页脚底部的HTML页面在IE中打印出来

解决方法

相关推荐