How to make a HTML Page in A4 paper size page(s)?

Question

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word?

Essentially, I want to be able to show the HTML page in the browser, and out

Answer 1

I have used 680px in commercial reports to print on A4 pages since 1998. The 700px could not fit correctly depend of size of margins. Modern browsers can shrink page to fit page on printer, but if you use 680 pixels you will print correctly in almost any browsers.

That is HTML to you Run code snippet and see de result:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Answer 2

Create section with each page, and use the below code to adjust margins, height and width.

If you are printing A4 size.

Then user

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

then create a div with all your content in it.

<div class="Section1"> 
    type your content here... 
</div>

or

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Answer 3

I know that this subject is quite old but I want to share my experience about that topic. Actually, I was searching a module that can help me with my daily reports. I'm writting some documentations and some reports in HTML + CSS (instead of Word, Latex, OO, ...). The objectif would be to print them on A4 paper to share it with friends, ... Instead of searching, I decided to have a small funny coding session to implement a simple lib that can handle "pages", page number, summary, header, footer, .... Finally, I did it in ~~2h and I know that's not the best tool ever but it's almost ok for my purpose. You can take a look at this project on my repo and don't hesitate to share your ideas. It's maybe not what you are searching for at 100% but I think that this module can help you.

Basically I create a page of body "width: 200mm;" and container of height: 290mm (smaller than A4). Then I used page-break-after: always; so the "print" option of the browser know when to split pages.

repo: https://github.com/kursion/jsprint