Добавить содержимое в нижней части последней страницы

Я использую wkhtmltopdf для создания отчетов в формате PDF из HTML, мне нужно создать пользовательский отчет, который следует схеме:Добавить содержимое в нижней части последней страницы

Некоторая информация в верхней части первой страницы ,
Таблица, которая может содержать от 1 до n строк (она должна использовать любое количество необходимых ей страниц)
Некоторая информация в конце последней страницы.

Объединение всего этого делает трюк; однако, поскольку информация о шаге 3 появляется сразу после таблицы, есть ли способ разместить контент в конце страницы?

Я даже не уверен, что это решение основано на CSS или wkhtmltopdf.

источник

2012-02-03 juanefren

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>

источник

2012-02-09 02:55:44 thirtydot

Спасибо, у меня было много проблем, потому что у меня не было исправленной версии QT, потратил много времени на компиляцию без успеха, пока не понял, что на странице есть двоичная версия. – juanefren

У меня небольшая проблема после того, что вы имеете в виду. В чем разница между содержанием «сразу после таблицы» и «в конце таблицы»?

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, который у вас есть, или фотографии того, как он выглядит, и то, что вы хотите, чтобы он выглядел, может помочь.

источник

2012-02-07 16:42:36 s4y

Было ошибку опечатки, я имею в виду, чтобы показать на «последнюю странице» вместо «последнего таблицы "это пример: http: //dl.dropbox.com/u/1990697/example.pdf – juanefren

Это довольно сложная задача, и я не думаю, что вы можете решить это с помощью чистого CSS в это время (хотя я бы хотел, чтобы вас доказали неправильно).

Также поддержка определенных разрывов страниц (page-break-inside: avoid;) не самая лучшая. На самом деле я не думаю, что он работает со столом до сих пор. Вероятно, вы столкнулись бы с некоторыми рядами, разделенными на странице. (Webkit делает один PDF, а затем разрезает его на отдельные страницы, в основном независимо Что на краю ...)

enter image description here

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

источник

2012-02-07 21:43:53 Jona

Похоже, интересная идея, как это происходит, когда wkhtmltopdf конвертирует ее http://dl.dropbox.com/u/1990697/out.pdf, конечно, я открыт для javascript решение в случае необходимости. – juanefren

@juanefren Вам, вероятно, нужно немного поиграть с высотой ('.page {height: 1360px;}') для контейнера страницы. На моей машине он работает с моим примером кода. – Jona

@juanefren ваше приложение недоступно –

Добавить содержимое в нижней части последней страницы

ответ

Смежные вопросы