仅在页面底部的最后一页打印页脚元素

Question

我正在构建一个可以打印div元素的网页。 我似乎无法找到解决方案是如何使内部的div元素仅在最后一页出现在页面底部 。

已找到多个答案，说这是不可能的，但可以追溯到2015年左右。这个问题仍然没有解决方案吗？

这里是参考链接：

另一个解决方案说它们有效，因为它们不需要在最后一页的底部打印页脚。

目前，我正在使用此代码。

@media print {
   #footer {
       position : fixed;
       bottom : 0;
   }
}

它可以将页脚放在底部。 但问题是每个页面都会重复这个问题。 任何帮助赞赏。

Answer 1

这是我在普通js中的解决方案。 此解决方案使用page-break-after: always在最后一页打印“打印我的页面” page-break-after: always在其余内容上打印。

请参阅下面的jsfiddle或代码：


    <div id="content">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec turpis varius, pellentesque velit pellentesque, ullamcorper eros. Ut nec nunc facilisis, lobortis felis in, varius sapien. Maecenas nec nulla et quam pellentesque eleifend. Nullam tempus tellus sed lacinia molestie. Fusce pharetra dui eu neque sollicitudin, id bibendum sapien consequat. Proin fringilla turpis a nunc tristique varius. Vivamus vehicula ipsum ex, sed lobortis ligula viverra eu. Duis vestibulum in risus non commodo. Proin non quam quam. Nulla porttitor scelerisque volutpat.
      </p>
      <p>
      Mauris in congue diam, in fringilla risus. Nullam dolor ligula, porttitor sed neque at, vestibulum aliquam risus. In hac habitasse platea dictumst. In quis convallis enim. Curabitur sit amet efficitur ante. Aenean ante libero, volutpat sit amet viverra non, pellentesque iaculis felis. Ut ut convallis nisl. Phasellus maximus nisl non consectetur efficitur. Aliquam hendrerit lacus sit amet sagittis vestibulum. Sed maximus luctus leo, fermentum interdum nisl malesuada quis. Ut porttitor in nisl at molestie. Vivamus aliquam eros sem, at viverra turpis venenatis eget. Donec hendrerit leo velit, a scelerisque nunc varius sit amet. Ut dignissim tincidunt justo, tempus commodo erat.
      </p>
      <p>
      Nunc commodo lobortis leo, non vulputate magna. Ut arcu nunc, hendrerit quis mattis a, aliquet vel sem. Donec vel lacus sit amet ipsum dapibus eleifend. Duis sit amet nulla velit. Integer rutrum turpis porttitor felis dignissim, vitae vulputate mauris feugiat. In aliquam eu eros id imperdiet. Etiam interdum sit amet ligula non scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in consectetur mauris. Donec elementum lobortis fringilla. Morbi porttitor, nisi id tincidunt hendrerit, risus risus feugiat mauris, ut ornare nunc nunc ut ante. Donec quis arcu rhoncus, auctor elit eget, lacinia erat. Duis ornare molestie massa nec elementum.
      </p>
      <p>
      Nam hendrerit rutrum nisi sed eleifend. Sed vehicula ultrices augue, nec interdum lorem commodo a. Nullam eget suscipit tortor, ut ultrices justo. Curabitur varius, magna non ullamcorper lacinia, risus lorem finibus enim, sed sagittis quam nisl sit amet ipsum. Nulla ac pulvinar lacus. Vivamus dapibus leo a erat aliquet placerat. Donec facilisis lectus id magna posuere, quis condimentum eros commodo. Vestibulum posuere nisi tortor, sit amet euismod sapien lacinia vitae.
      </p>
      <p>
      Donec facilisis, nisi id vestibulum feugiat, neque leo suscipit justo, nec interdum dolor urna nec leo. In ultricies aliquet auctor. Sed sollicitudin ante felis, ut tempor velit imperdiet eget. Pellentesque in ligula aliquet justo ornare lobortis. Morbi dapibus augue non pretium malesuada. Sed ultrices elit risus, at ullamcorper eros dignissim in. Morbi convallis augue ac ex laoreet sagittis.
      </p>
    </div>
    <button onclick="OpenPrintPage()">
    Print My Page
    </button>
    <script>
            function OpenPrintPage() {

                var OriginalContent = document.getElementById('content').innerHTML;
                var PrintWindow =   window.open("","PrinterFriendlyPage","scrollbars=yes,status=yes,toolbar=yes,menubar=yes,resizable=yes,height=510,width=750"); 

                PrintWindow.document.write( '<html><head><style>#content {page-break-after: always;}</style></head><body><div id="' + 'content' + '">' + '</div><a class="printbtn" href="javascript:window.print()">{ Print This Page }</a></body></html>'); 

                PrintWindow.document.close(); 
                PrintWindow.document.getElementById('content').innerHTML += OriginalContent; 
            }


    </script>

仅在页面底部的最后一页打印页脚元素

问题描述

1 个解决方案

解决方案1
0 2019-04-01 21:14:50

仅在页面底部的最后一页打印页脚元素

问题描述

1 个解决方案

解决方案1 0 2019-04-01 21:14:50

解决方案1
0 2019-04-01 21:14:50