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

Question

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

Для PyPI существует сторонняя библиотека под названием natsort (полное раскрытие, я автор пакета). Для вашего случая вы можете сделать одно из следующих действий:

>>> from natsort import natsorted, ns
>>> x = ['Elm11', 'Elm12', 'Elm2', 'elm0', 'elm1', 'elm10', 'elm13', 'elm9']
>>> natsorted(x, key=lambda y: y.lower())
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']
>>> natsorted(x, alg=ns.IGNORECASE)  # or alg=ns.IC
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']

Вы должны заметить, что natsort использует общий алгоритм, поэтому он должен работать практически для любого ввода, который вы бросаете на него. Если вы хотите получить более подробную информацию о том, почему вы можете выбрать библиотеку для этого, а не выполнять свою собственную функцию, просмотрите страницу «Работает»

>>> from natsort import natsorted, ns
>>> x = ['Elm11', 'Elm12', 'Elm2', 'elm0', 'elm1', 'elm10', 'elm13', 'elm9']
>>> natsorted(x, key=lambda y: y.lower())
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']
>>> natsorted(x, alg=ns.IGNORECASE)  # or alg=ns.IC
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']

документации

>>> from natsort import natsorted, ns
>>> x = ['Elm11', 'Elm12', 'Elm2', 'elm0', 'elm1', 'elm10', 'elm13', 'elm9']
>>> natsorted(x, key=lambda y: y.lower())
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']
>>> natsorted(x, alg=ns.IGNORECASE)  # or alg=ns.IC
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']

, в частности, специальные предложения Everywhere Everywhere ! .

Если вам нужна опция сортировки вместо функции сортировки, используйте любую из приведенных ниже формул.

>>> from natsort import natsort_keygen, ns
>>> l1 = ['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']
>>> l2 = l1[:]
>>> natsort_key1 = natsort_keygen(key=lambda y: y.lower())
>>> l1.sort(key=natsort_key1)
>>> l1
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']
>>> natsort_key2 = natsort_keygen(alg=ns.IGNORECASE)
>>> l2.sort(key=natsort_key2)
>>> l2
['elm0', 'elm1', 'Elm2', 'elm9', 'elm10', 'Elm11', 'Elm12', 'elm13']

1

javascript html css css-paged-media css3

задан Hamed 16 January 2019 в 16:17

1 ответ

Другие вопросы по тегам:

javascript html css css-paged-media css3

Похожие вопросы:

score 0 · Answer 1

Мне не удалось решить проблему с помощью таблицы, поэтому я решил свою проблему с помощью 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>