Prajeet Shrestha Prajeet Shrestha - 16 days ago 6
CSS Question

How to queue print of multiple section of HTML file in javascript?

enter image description here

Above image shows different part of html file representing single page that should be printed separately. Is there anyway to queue a print order from javascript, to contents of each div element separately?

CSS:

.AMini
{
height:70mm;
width:50mm;
background-color: white;
border: 5px solid black;
margin: 10px;
float:left;
}


HTML:

<div class="AMini">
<h1>Page 1</h1>
</div>


<div class="AMini">
<h1>Page 2</h1>
</div>


<div class="AMini">
<h1>Page 3</h1>
</div>

Answer

Using the print media query in combination with page-break-after you should be able to define a style for the printer which stacks up the three divs and puts page breaks between them.

Something like:

@media print 
{
    body * 
    {
        visibility: hidden;
    }

    .AMini, .AMini *
    {
        visibility: visible;
    }

    .AMini
    {
        page-break-after: always;
        float: none;
        position: absolute;
        display:block;
    }
}
Comments