Блог

Главная - Вопросы по программированию - Печать верхнего и нижнего колонтитулов продолжает повторять html

Печать верхнего и нижнего колонтитулов продолжает повторять html

#javascript #html #css #printing

#javascript #HTML #css #печать

Вопрос:

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

Скрипка

весь html

 <html>
<head>
<title></title>
<style>
@media screen
{
.noPrint{}
.titles{display:none;}
.footer{display:none;}
}
@media print
{
.noPrint{display:none;}
.title{}
.footer{}
}
</style>
</head>
<body>

<button onclick="printDiv();">Print it</button>
  <table class="report-container" name="table" id="table"  >
    <thead class="report-header">
  <th colspan="9"><div class="titles">Title Header <br></div></th>
   <tr>
     <td>ID Number</td>
     <td>Name</td>
     <td>Barangay</td>
     <td>Sex</td>
     <td>Sector</td>
     <td>Amount</td>
     <td>Signature/thumb</td>
     <td>ID amp;nbsp;amp;nbsp;</td>
     <td>Date Received</td>
   </tr>
   </thead>
  <tfoot>
   <tr>
    <td colspan=9><div class="footer">Title Footer</div></td>
   </tr>
</tfoot>
<tbody class="report-content">
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  </tbody>
  </table>
  </body>

Javascript

     <script ="text/javascript">

    function printDiv() {
     var divToPrint = document.getElementById('table');
     var htmlToPrint = ''  
    '<style type="text/css">'  
        'table td {'  
    'border:1px solid #dddddd;'  
    'padding:8px;'  
    '}'  

    'table  {'  
    'border-collapse: collapse;'  
    'width: 100%;'  
    '}'  
    '</style>';
    htmlToPrint  = divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
   }
   </script>

Ответ №1:

К сожалению, то, что вы пытаетесь сделать, на самом деле не является частью спецификации для thead tfoot элементов и . Но есть несколько «хаков», которые вы можете использовать для эмуляции желаемого эффекта. Вот что приходит на ум:

Для нижнего колонтитула таблицы вы можете установить его отображение table-row-group , удалить его из таблицы, а затем добавить его в таблицу.

 // Make footer visible on last page only
let tbl = document.getElementById('table');
let footer = tbl.getElementsByTagName('tfoot')[0];
footer.style.display = 'table-row-group';
tbl.removeChild(footer);
tbl.appendChild(footer);

Для заголовка таблицы или действительно только заголовка я бы просто клонировал узел «заголовок», применил желаемый стиль, добавил его в таблицу и удалил исходный узел.

 // Make header visible on first page only
let title = document.querySelector('.titles');
let newTitle = title.cloneNode(true);
newTitle.style.textAlign = "center";
newTitle.style.fontWeight = "bold";
tbl.prepend(newTitle);
title.remove();

Эти блоки можно добавить в верхнюю часть вашей функции печати, как показано в обновленной скрипке здесь: https://jsfiddle.net/5azfn7wu /