Question

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

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

这是参考链接：

Print table footer at the very bottom on last page

Footer on last printed page

Print footer only in last printed page for media print

另一种解决方案表示它们之所以有效，是因为它们不需要在最后一页的底部打印页脚。

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

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

可以将页脚放在底部。但是问题在于，每一页都会重复该操作。任何帮助表示赞赏。

Answer 1

这是我在普通js中的解决方案。此解决方案使用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 个答案: