How to place blank space on top of each page of printed HTML

Question

I developed an HTML report with multiple div and table s. Now my client asks me to add a duplicate heading at the top of each printed page. As far as I know, this is not possible using simple CSS and HTML. Like the attempt, I put the header div element inside thead, to which I applied display: table-header-group to display, and placed all the other report elements as rows of the main table, but did not succeed.

• The workaround is to use @print { .header {position: fixed; top: 10px} } @print { .header {position: fixed; top: 10px} } in order to repeat the .header element at the top of each page. But for this work, we must put an empty space at the top of each new page; otherwise, the fixed title element is mixed with other elements at the top of the table.

• As another workaround, I can calculate the height of the elements during rendering and, if necessary, manually decompose the pages of the page. So I want to know if there is any Javascript library available to execute when the page loads, and calculates all the rendering heights of the div elements on the page and places the div element with zero height with page-break-before: always; in front of every div that exceeds A4 height. Suppose the following divs result in a height of 14, 10, 8, 9, 6, 13, and 6 centimeters during rendering. I want the library to place the dummy element with a pagination in the specified places:

<div id="d1">...</div>

<div id="d2">...</div>

<!-- here, because 14+10+8 exceeds 30cm -->

<div id="d3">...</div>

<div id="d4">...</div>

<div id="d5">...</div>

<!-- here, because 8+9+6+13 exceeds 30cm -->

<div id="d6">...</div>

<div id="d7">...</div>

Answer 1

Here is my final decision. The following code executes when the page loads. My page was composed of only a few divs. Two divs as headers and other divs (containing tabular data) as details. I assumed that I always printed in the portrait scheme, and also assumed the size of A4 (= ~ 21x30 cm). I also suggested that the margins are 4.5 cm for the left and right bottom edges of the page. First, the code resizes the divs to a width compatible with the portrait (so that all tables are automatically resized in the div). Then I iterate over the elements without a div title to add a page break when the height exceeds the height of A4. I also cloned and added title elements on top of each page through this code.

 // page width in pixels function pw() { return cm2px(16.5); } // page height in pixels function ph() { return cm2px(25.5); } function px2cm(px) { return px * 2.54 / 96; } function cm2px(cm) { return cm * 96 / 2.54; } $(function() { $('.section > div').each(function(){ $(this).width(pw() + 'px'); }); hh = $('.section > div.heading'); headingHeight = hh.eq(0).height() + hh.eq(1).height(); h1 = hh.eq(0).clone(); h2 = hh.eq(1).clone(); var h = headingHeight; var pageHeight = ph(); $('.section > div').not('.heading').each(function(){ if (h + $(this).height() + 14 > pageHeight) { h1.css('page-break-before', 'always'); $(this).before(h1.clone()); $(this).before(h2.clone()); h = $(this).height() + 14 + headingHeight; } else { h += $(this).height() + 14; } }); }); 

Answer 2

Have you considered breaking a table into multiple pages? I have done this in the past, measuring how big the page will be, and then writing the lines to the browser. Each time the end of the page was reached, I would close the table written, then start the next one by typing a new DIV, etc. You need to keep track of the maximum size of each column, etc., But in terms of efficiency, we could write thousands of lines per screen and, as a rule, would return up to 60 seconds for large reports.

I also used the CSS orientation function, available only in IE (recording mode: tb-rl), to simulate the page displayed in the landscape, and the content as well - this requires a bit more thought about rewriting it, BUT the resulting content looked very professional.

Answer 3

Try jquery to calculate div tag heights. However, html printing can usually be done using some simple php.

Also, the easiest way could be to create a separate css file for your printed page and to create the background image of the div that you want to use for the printed page. In your regular style sheet, the same div may be empty and not have height or width.

This link is some company message on how to use css to print html