How to get only content specific height and width in print using javascript

Question

I am developing pos system but when I print my bill it prints in whole page I just want it should takes only specific width and only that much height which covering in div.

here is my code

<html>
    <head>
        <title>div print</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" />
        <script type="text/javascript">
            function printdiv(printpage) {
                var headstr = "<html><head><title></title></head><body>";
                var footstr = "</body>";
                var newstr = document.all.item(printpage).innerHTML;
                var oldstr = document.body.innerHTML;
                document.body.innerHTML = headstr+newstr+footstr;
                window.print();
                document.body.innerHTML = oldstr;
                return false;
            }
        </script>
    </head>
<body>

    <input name="b_print" type="button" class="ipt"   onClick="printdiv('div_print');" value=" Print ">
        <div id="div_print">
            <h1 style="Color:Red">this will print</h1>
        </div>
    </body>
</html>

Possible duplicate of [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — Ionut Necula, Jul 07 '17 at 08:59
this will set the chartdiv height to 200px ."document.getElementById('chartdiv').style.height = '200px'" — AutoTester213, Jul 07 '17 at 09:00
@lonut NO I am able to print only div content by my question is when I print it take whole page height and width and I want this take only div height .Getting my question ? no white space — nitesh Sharma, Jul 07 '17 at 09:03

score 0 · Answer 1 · answered Jun 13 '19 at 21:31

The ideal solution is to use a separate CSS for printing where you specify the size restraints. You could use a print specific CSS stylesheet and hide everything but what you want printed. Divide your elements into two classes, one that wont print and another that will:

<div class="no-print">Ignore me</div><div class="something-else">Print me! 
 </div>

The elements in the print class should remain while the ones that are ignored should not print.

<style type="text/css" media="print">
.no-print { display: none; }
</style>

As a warning, be careful with "document.all.item" as if there is more than one element found, it will return an array of elements which may be contributing to your problem.

How to get only content specific height and width in print using javascript

1 Answers1