CODEWITHSUNDEEP
csshtml
user8483278
user8483278

Reputation:

Is it possible to arrange a html for print?

In my html, there are header, sidebar, footer, and <main>. They are convenient when reading on browser, but when reader print the page, I want them to print only the <main> part because sidebar... etc are not necessary when printed on papers.

Can i select the visible parts when printed?

Upvotes: 0

Views: 335

Answers (3)

Jelmer Bouman
Jelmer Bouman

Reputation: 109

Try window.print for printing:

<button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
    window.print();
}
</script>

Then use css to style the items for printing:

@media print
{
    header{
      display: none;
    }
}

Upvotes: 0

Dhanush Chikoti
Dhanush Chikoti

Reputation: 68

Here is what I have used to print only the desired content.

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Side Bar Content
    </div>

    <div id="printable">
        Main Content
    </div>
</body>

Upvotes: 2

atmd
atmd

Reputation: 7490

sure, you use a media query.

using a media query in your css

@media print {
   … css goes here
}

You could also use a seperate print.css file

here is an article that goes into greater details

Upvotes: 0

Related Questions