Отпечатанные HTML-примечания на странице

Ответ 1

Сначала ответьте на вопрос о высоте страницы 27.9cm vs 26.1cm. Это можно объяснить несколькими причинами, включая, по крайней мере, следующее:

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

Ни один из этих двух источников не доступен для автора страницы для опроса.

Но...

Мне удалось разработать решение JQuery, которое получит сноски, которые будут вести себя так, как должны.

• Встроенная сноска извлекается, автоматически подсчитывается и заменяется номером надстрочного номера. То есть:

  <div>My first sentence consists of words<span class="footnote">My first footnote.</span></div>
  

  становится

  <div>My first sentence consists of words<sup>1</sup></div>
  

  с текстом

  1 My first footnote.

  внизу текущей страницы размера печати. ​​

• Содержимое документа отформатировано на "страницы", используя вставку сносок текущей страницы в конце каждой "страницы" размера печати. Никаких специальных вставленных вручную <div> на страницу не требуется.
• Решение не разбивает текстовый блок, а вставляет сноски между существующими текстовыми блоками (решение поддерживает элементы верхнего уровня <div> или <p>).
• Я тестировал это в Safari, Firefox и Chrome (только для Mac).

См. fiddle для рабочего примера. Javascript немного сложнее, чем я хотел бы (92 строки), и работает, временно получая браузер для компоновки страницы на основе ваших проинструктированных pageHeight и pageWidth перед тем, как вернуться к нормальной компоновке.

ОБНОВЛЕНО:

Я выпустил более легкую версию, которая объединяет технику @apaul34208, используемую для достижения полного размера страницы независимо от браузера, но сохраняет концепции встроенного удаления сносок и автоматической разбивки на страницы правильных сносок для каждой страницы в соответствии с принтером. Теперь это работает для Safari, Chrome и Firefox (только для тестирования на Mac) без изменений как в A4, так и в US Letter. Разрывы страниц ограничиваются границей <div> или <p>. Спасибо Павлу.

Обновленный рабочий пример представлен здесь: fiddle

или полный экран для просмотра страницы здесь: только страница результатов

Ответ 2

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

По моему мнению, css counter - это забавная часть.

Полноэкранный результат < - Попробуйте распечатать предварительный просмотр в этом режиме Рабочий пример

HTML:

<div id="pagewrapper1">
    <p>Zombies<sup>1</sup> reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo vel maleficia? De Apocalypsi undead dictum mauris brains<sup>2</sup>. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.<sup>3</sup>

    </p>
    <ol class="footnotes">
        <li>This is a foot note about Zombies.</li>
        <li>This is a foot note about Brains.</li>
        <li>This is a foot note about Horror.</li>
    </ol>
</div>
<div id="pagewrapper2">
    <p>Zombies<sup>4</sup> reversus ab inferno... and so on...

CSS

*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 1em;
    padding:0;
    margin:0;
    height:100%;
}
#pagewrapper1, #pagewrapper2 {
    position:relative;
    border: 1px solid #000;
    min-height:100%;
    -webkit-region-break-inside: avoid; /* added these bits to work out print issue */
    page-break-after: always;
    page-break-inside: avoid;
}
p {
    margin:20px;
}
sup {
    font-size: .6em;
}
ol.footnotes {
    list-style-type: none;
    margin-left: 3em;
    position: absolute;
    bottom:0;
}
ol.footnotes > li {
    counter-increment: customlistcounter;
}
ol.footnotes > li:before {
    content: counter(customlistcounter)" ";
    position:relative;
    top:-4px;
    font-size: .6em;
    width: 3em;
}

jQuery для позиции и счетчика:

$('#pagewrapper1, #pagewrapper2').css({
        'padding-bottom': $('.footnotes').height()
});

$('#pagewrapper2 ol.footnotes').css({
    'counter-reset': 'customlistcounter ' + $('#pagewrapper1 ol.footnotes li').size()
});

Я играл с этим немного больше, предварительный просмотр печати выглядит хорошо в Firefox, Chrome и IE10, но, похоже, проблемы в Safari.

Ответ 3

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

Мы с коллегой работаем над простым приложением, которое в основном является текстовым редактором html, но может экспортировать html в виде PDF, с оглавлением, сносками с головами и всеми.

Принц - лучшее, с чем мы дошли до сих пор. Сообщите мне, если это не будет работать для вас.