0

I've spent a lot of hours trying to search and fix the problem without success. I need help with my piece of code as I'm not experienced at JavaScript. What I want to achieve is to print only the content of one div directly onto my wireless label printer (Brother QL-810W) which has some type of continuous paper with a width of 62mm so right now the code it is working but it takes the whole page ignoring all the content except the one needed. In that case the job sent to printer it is containing the needed label but also a lot of blank space.

The required label size it will be something like 62x62mm or to take the size of the div since we can handle his properties. Thanks to @Taki I've managed to put together all the code but both of us we missed that last part.

Thanks in advance! Here is the code

//show hide div for label printing

$(document).ready(function(){
    $("#show-hide").click(function(){
    $("#myId").toggle();
             });
                });
     
//start print div for label printing
  
  function printDiv(myId){
var HiddenElements = document.querySelectorAll( 'body *' ); // get all the elements in the body
    var VisibleElements = document.querySelectorAll( '#' + myId + ' *' ); // gets the elements inside the div to be printed

    var index = 0, length = HiddenElements.length;
    for (  ; index < length; index++) {
        HiddenElements[index].style.visibility = "hidden"; // hide all the elements in the body             
    }   

    index = 0;
    length = VisibleElements.length;
    
    for (  ; index < length; index++) {
        VisibleElements[index].style.visibility = "visible"; // show all the elements inside the div to be printed      
    }

    // display the element to be printed

    myElement = document.getElementById(myId);
    myElement.style.visibility = "visible"
    
    var oldPos = myElement.style.position;
    myElement.style.position = "absolute";
    
    myElement.style.left = 0;
    myElement.style.top = 0;

    setTimeout(window.print, 1000); // Wait a bit for the DOM then Print ( Safari :/ )

    // wait for the data to be sent to the printer then display the previous content
    setTimeout(function(){    
    
        index = 0;
        length = HiddenElements.length;
        
        for (  ; index < length; index++) {
            HiddenElements[index].style.visibility = "visible";             
        }   
        
        myElement.style.position = oldPos;
    }, 5000);

}

document.getElementById('doPrint').addEventListener('click', function(){
    printDiv('myId');
});
#page{
  background-color:#808080;
  font-size:18px;
}
#menu {
  font-size:50px;
  background-color:#808080;
}
#myId{
  background-color:#ffffff;
  border:4px solid #000000;
  font-size:16px;
}
#something{
  background-color:#808080;
}
#footer{
  background-color:#808080;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">Grey color div's <strong>NO NEED</strong> to be printed on printer.<br>
The current piece of code it is working but not as expected because it takes the whole page ignoring all the content except required div but in this case the label sent to the printer has a lot of blank space
<div id="menu">
<a href="#"><i class="fa fa-edit"></i></a> <!-- edit -->
<a href="#"><i class="fa fa-trash"></i></a><!-- delete -->
<a id="show-hide" href="#" rel="nofollow" onclick="return false"><i class="fa fa-qrcode"></i></a><!-- show/hide qrcode -->
<a id="doPrint" href="#" rel="nofollow" ><i class="fa fa-print"></i></a><!-- send the div "myId" to printer -->

</div>
<div id="myId">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/220px-QR_code_for_mobile_English_Wikipedia.svg.png" alt="qrcode" height="100" width="100">
<li>All the contents of this div should be printed on my label printer at the div size or to fit paper size for example 62x62mm</li>
<li>clicking on qrcode show/hide that div</li>
<li>the content is generated by php code</li>
<li>the print option should work also on mobile browsers</li>
                
</div>

<div id="something">another grey div NO NEED to be printed</div>
<div id="footer">this div also NO NEED to be printed</div>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Gino
  • 40
  • 7
  • Possible duplicate of [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) – Muhammad Omer Aslam Mar 14 '18 at 10:44
  • use print media query on your CSS to specify how it must look on print. Apply a display: none; to non-printable objects and display: block; to the div you want to print. – JoelBonetR Mar 14 '18 at 10:56
  • @JoelBonetR i'm looking for a solution not for ideas since i've asked here. I've spent a lot of time researching and doing tests and test and tests....that's why i'm asking for HELP! – Gino Mar 14 '18 at 13:40
  • Have you tried with print media queries? since you're not going to pay us, do not demand. We are here to help, not to work for you. – JoelBonetR Mar 14 '18 at 13:43
  • 1
    `@media print { /* All your print styles go here */ #header, #footer, #nav { display: none; } #desiredDiv{display: block; width: 600px;} }` then all will being hidden but the desired div, that will be printed at 600px width and auto height. Edit it to match your code. – JoelBonetR Mar 14 '18 at 13:46
  • of course i tried...the problem is that i cannot manage the height of the printed document. I've managed to extract only the required div, then with @ media print and @ page fine tuned the result but i still get the problem with the height... and in my case i use a label printer from brother as mentioned and when the print job it is sent the printer, it starts to use a lot of paper leave it blank until the label is printed..... – Gino Mar 15 '18 at 08:20
  • maybe i should try to convert the div to an image and after that print it..... – Gino Mar 15 '18 at 08:22

0 Answers0