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

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

0 голосов
/ 13 мая 2018

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

Содержание страницы является динамическим, поэтому я не знаю, какая моя последняя страница.

Я попробовал приведенный ниже код, и он заставляет нижний колонтитул появляться на последней странице предварительного просмотра, но не в нижнем колонтитуле последней страницы. В настоящее время нижний колонтитул печатается на странице 2, которая находится непосредственно рядом с секцией основного текста, но Я хочу, чтобы нижний колонтитул был напечатан на странице 2 нижнего колонтитула 

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script language="javascript" type="text/javascript">
        function printDiv(divID) {
            //Get the HTML of div
            var divElements = document.getElementById(divID).innerHTML;
            //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></head><body>" +
              divElements + "</body>";

            //Print Page
            window.print();

            //Restore orignal HTML
            document.body.innerHTML = oldPage;


        }
    </script>

</head>
<body>
    <button onclick="myFunction()"> Print this page</button> <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" /> >
    <script>
        function myFunction() {
            window.print();
        }

    </script>
    <div id="printablediv">
        <table>
            <thead>
                <tr style="height:30px;"> <th> PAGE HEADER</th> </tr>
            <thead>
            <tfoot> <tr> <td id="spacer" style="height:200px;"> </td> </tr> </tfoot>
            <tbody>
                <tr>
                    <td>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>
                        content<br> content<br> content<br> content<br> content<br> content<br>

                    </td>
                </tr>
            </tbody>
        </table>        

        <div id="footer" style="position:relative; bottom: 0;"> Sample </div>

    </div>
</body>
</html>

Пожалуйста, обратитесь к моему приложенному скриншоту для справки enter image description here

1 Ответ

0 голосов
/ 13 мая 2018

Вы можете изменить этот код: 

<div id="footer" style="position:relative; bottom: 0;"> Sample </div>

К этому: 

<div id="footer" style="margin-top: 200px"> Sample </div>

Вы можете изменить значение margin-top на другое значение.

...