Why is window.print() printing the whole page instead of the mentioned div

Viewed 45

I generate an invoice bill and print it after placing an order. It is printing on desktop perfectly, but on mobile devices or tablet devices it prints the whole page.

How can I solve this issue?

This is the printing button:

    <input type="button" 
        class="btn btn-primary non-printable"
        onclick="printDiv('printableInvoice')"
        value="Proceed, If thermal printer is ready."/>

This is the JavaScript function:

    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
        location.reload();
    }
1 Answers

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

<div>
  <h1>Out side of div</h1>
  <div id="print-div">
    <h1>Only print this text</h1>
  </div>
</div>


<button type="button" onclick="printJS('print-div', 'html')">
  Print Button
</button>

Check this demo https://jsfiddle.net/mdsakir/s0L67t2a/2/

Related