Добавить контент в конец последней страницы
Я использую wkhtmltopdf для создания отчетов PDF из HTML, мне нужно создать собственный отчет, который следует за этим шаблоном:
- Некоторая информация в верхней части первой страницы.
- Таблица, которая может содержать от 1 до n строк (она должна использовать любое количество страниц, которые ей нужны)
- Некоторая информация в конце последней страницы.
Объединение всего этого делает трюк; однако, поскольку информация о шаге 3 появляется сразу после таблицы, есть ли способ разместить контент в конце страницы?
Я даже не уверен, что это решение основано на CSS или wkhtmltopdf.
Ответы
Ответ 1
http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html
Взгляните на раздел "Нижние колонтитулы и заголовки".
Вы можете использовать --footer-html в сочетании с некоторым JavaScript для этого.
wkhtmltopdf --footer-html footer.html http://www.stackoverflow.com/ so.pdf
Я основал содержимое моего footer.html в примере, приведенном в ссылке выше:
<!DOCTYPE html>
<script>
window.onload = function() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = unescape(z[1]);
}
//if current page number == last page number
if (vars['page'] == vars['topage']) {
document.querySelectorAll('.extra')[0].textContent = 'extra text here';
}
};
</script>
<style>
.extra {
color: red;
}
</style>
<div class="extra"></div>
Ответ 2
Это довольно сложная задача, и я не думаю, что вы можете решить это с помощью чистого CSS в это время (хотя я хотел бы, чтобы меня доказали неправильно).
Также поддержка определенных разрывов страниц (page-break-inside: avoid;) не самая лучшая. На самом деле я не думаю, что он работает со столом до сих пор. Вероятно, вы столкнулись бы с некоторыми рядами, разделенными на странице. (Webkit отображает один PDF файл, а затем разрезает его на отдельные страницы, в основном, независимо от того, что на краю...)
![enter image description here]()
Мое решение этой дилеммы состояло в том, чтобы создать одиночный placeholder div в размере одной страницы, а затем распространять контент с помощью некоторых программных langugae между этими заполнителями перед созданием PDF.
В последней из таких оберток вы можете добавить нижний колонтитул с абсолютным расположением внизу.
Вот пример кода:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sample Data</title>
<style>
* {
padding: 0;
margin: 0;
}
.page {
page-break-inside: avoid;
height: 1360px;
position: relative;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ccc;
padding: .23em;
}
.footer {
position: absolute;
color: red;
bottom: 0;
}
</style>
</head>
<body>
<div class="page one">
<p>
Some info Here... at the top of first page
</p>
<!-- Zen Coding: table>tbody>(tr>td>{A sample table}+td>{Foo bar})*42 -->
<table>
<tbody>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
</tbody>
</table>
</div>
<div class="page two">
<table>
<tbody>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
</tbody>
</table>
<p class="footer">
The last info here in the bottom of last page
</p>
</div>
</body>
</html>
Ответ 3
У меня есть небольшая проблема после того, что вы имеете в виду. В чем разница между содержимым "сразу после таблицы" и "в конце таблицы"?
Элемент tfoot может быть тем, что вы ищете:
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tfoot>
<tr><th>Footer</th></tr>
</tfoot>
<tbody>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
</tbody>
</table>
Если нет, не могли бы вы уточнить? Короткий пример HTML, который у вас есть, или фотографии того, как он выглядит, и то, что вы хотите, чтобы он выглядел, может помочь.
