Печатать элемент нижнего колонтитула только на последней странице внизу страницы - PullRequest
Новая
       31

Печатать элемент нижнего колонтитула только на последней странице внизу страницы

0 голосов
/ 01 апреля 2019

Я создаю веб-страницу, которая может печатать элемент div. Кажется, что я не могу найти решение, как заставить внутри какой-то элемент div появляться внизу страницы только на последней странице .

Нашли несколько ответов, в которых говорилось, что это невозможно, но датировано примерно 2015 годом. По-прежнему нет решения этой проблемы?

вот ссылка для справки:

Другое решение говорит, что они работают, потому что им не нужно печатать нижний колонтитул внизу последней страницы.

В настоящее время я использую этот код. 

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

Он может разместить нижний колонтитул внизу. Но проблема в том, что это будет повторяться для каждой страницы. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 02 апреля 2019

Вот мое решение в простой 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>
...