Как сделать так, чтобы нижний колонтитул HTML занимал свободное место на каждой странице при печати на нескольких страницах? - PullRequest
Новая
       22

Как сделать так, чтобы нижний колонтитул HTML занимал свободное место на каждой странице при печати на нескольких страницах?

0 голосов
/ 16 января 2019

Мне нравится печатать очень длинную таблицу на нескольких страницах. На каждой странице у меня есть фиксированный заголовок, несколько записей в разделе тела со случайной высотой и нижний колонтитул. Случайные записи не должны разбиваться на страницы, а нижний колонтитул должен использовать доступное оставшееся пространство. Я создал образец кода с помощью кнопки печати. Когда я нажимаю на кнопку печати, я хочу, чтобы оранжевая рамка начиналась сразу после предыдущей красной рамки и занимала все пространство в нижней части страницы. Есть идеи как решить проблему? 

const main = document.querySelectorAll(".table-body")[0];
const newDiv = document.createElement("div");
for (let i = 0; i < 30; i++) {
  newDiv.innerHTML += `<div class="box" style="height: ${getRandomIntInclusive(120,250)}px">Line ${i+1} </div>`
}
main.appendChild(newDiv);

document.getElementById("print").addEventListener("click", () => {
  window.print();
});

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
table {
  width: 100%;
  border: 1px solid blue;
  padding: 10px;
}

.table-body {
  border: 1px dashed green;
  padding: 10px;
}

.box {
  border: 1px solid red;
  page-break-inside: avoid;
}

table > tfoot > tr > td {
  border: 2px solid orange;
}

.table-footer {
  border: 1px solid black;
  min-height: 100px;
  vertical-align: top;
}

@media print {
  @page {
      size: letter;
  }
  
  #print {
    display: none;
  }
}
<button id='print'>Print</button>
<table>
  <thead>
    <tr>
      <th>
        Header
      </th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <div class='table-body'></div>
      </td>
    <tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class='table-footer'>Footer</div>
      </td>
    <tr>
  </tfoot>
</table>

1 Ответ

0 голосов
/ 17 января 2019

Мне не удалось решить проблему с помощью таблицы, поэтому я решил свою проблему с помощью divs. Я отслеживал случайную высоту div-ов на каждой странице и назначал оставшееся место для нижнего колонтитула. У моих нижних колонтитулов есть ограничение минимальной высоты, чтобы на каждой странице был нижний колонтитул. Содержимое каждой страницы помещается в другой раздел, чтобы дать мне больше контроля над стилем каждой страницы; например: разрыв страницы после и переполнение . Решение не идеальное и надеюсь, что кто-то придет с лучшим подходом, но оно удовлетворяет мою потребность на данный момент. Ниже вы можете найти обновленный код: 

const main = document.getElementById("main");
const newDiv = document.createElement("div");
const paperHeight = 11 // paper height in inch
const paperMargin = 1; // sum of top and bottom paper margins in inch
const overflow = 0.11; // used to protect page overflow to the next page
const dpi = 96; // Display dots per inch (DPI)
const maxHeight = (paperHeight - paperMargin) * dpi; // max page height
const footerMinHeight = 40; // Min height of footer
const headerHeight = 100; // Height of header in px
const numOfItems = 20; // Number of items

let j = 0;
let items = '';
let pageCount = 1;
do {
  items += `<div class="page" style="max-height: ${paperHeight - paperMargin - overflow}in"><div class="box header" style="height: ${headerHeight}px">Page ${pageCount} - Header</div>`;
  let pageHeight = headerHeight;
  do {
    const elementHeight = getRandomIntInclusive(60, 250);
    if (elementHeight + pageHeight > maxHeight - footerMinHeight || j === numOfItems) {
      items += `<div class="box footer" style="height: ${maxHeight - pageHeight}px">Footer</div></div>`;
      break;
    } else {
      pageHeight += elementHeight;
      j++;
    }
    items += `<div class="box" style="height: ${elementHeight}px">Item ${j} </div>`;
  } while (j <= numOfItems)
  pageCount++;
} while (j < numOfItems)
newDiv.innerHTML = items;
main.appendChild(newDiv);



document.getElementById("print").addEventListener("click", () => {
  window.print();
});

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
* {
  box-sizing: border-box;
}

.page {
  border: 1px dashed green;
  page-break-after: always;
  overflow: hidden;
}

.box {
  border-bottom: 1px solid red;
}

.header {
  background: #e6ffe6
}

.footer {
  background: #fdfed6;
}

@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
  #print {
    display: none;
  }
}
<button id='print'>Print</button>
<div id='main'></div>
...