Is it possible to use HTML and Javascript to create a printable report?

Question

I am going to create some report on a website

so I simply select the data and show in HTML table

<img src="company_logo.png"/>
<h1>xxx report</h1>
<table>
    <tr>
        <th>header1</th><th>header2</th>
    </tr>
    <tr>
        <td>data 1a</td><td>data 1b</td>
    </tr>
    <tr>
        <td>data 2a</td><td>data 2b</td>
    </tr>
</table>
<span>Page 1 of 3</span>

But the report must print on paper, and every page must display the header and footer

header:

<img src="company_logo.png"/>
<h1>xxx report</h1>

footer:

<span>Page 1 of 3</span>

So I muse insert header and footer in each page when I generate the report

<img src="company_logo.png"/>
<h1>xxx report</h1>
<table>
    <tr>
        <th>header1</th><th>header2</th>
    </tr>
    <tr>
        <td>data 1a</td><td>data 1b</td>
    </tr>
    <tr>
        <td>data 2a</td><td>data 2b</td>
    </tr>
</table>
<span>Page 1 of 3</span>

<img src="company_logo.png"/>
<h1>xxx report</h1>
<table>
    <tr>
        <th>header1</th><th>header2</th>
    </tr>
    <tr>
        <td>data 3a</td><td>data 3b</td>
    </tr>
    <tr>
        <td>data 4a</td><td>data 4b</td>
    </tr>
</table>
<span>Page 2 of 3</span>

But I have no idea how to calculate the height of report, how to determine which record should be in new page, how to count total pages.

Is there any suggest for this problem?