从div输出特定数据并通过打印机打印

Question

I've spent all day in getting a solution for my need but since i'm not an experienced coder it's time for me to ask you guys for a little help.

My scenario is: I have some php code like:

<div id="unique_name">
<?php function_show_qrcode()?>
<?php function_show_text1()?>
<?php function_show_text2()?>
<?php function_show_text3()?>
</div>

What i want to achieve is to print the content of "unique_name" div (qrcode and some additional info) directly to a label printer attached via wireless on my smartphone and PC, printer that prints on continuous paper with a width of 62mm.

I have tried a lot of codes that i found but with no success because of browsers behavior regarding window.print()

The following code is working on firefox and chrome on pc but it is not working on safari mobile

<script>
        function printDiv(unique_name) {
        var printContents = document.getElementById(unique_name).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
            }
</script>

<a href="#" rel="nofollow" onclick="printDiv('unique_name')">Print label</a>

I am stuck on that and i think that something like converting the content of unique_name div into an image, save it and print it after that should work but there are a lot of steps to do and we want to do it more easy something like click and print or click and popup and then print and the most important thing is that it needs to work on mobile browsers

Thank you in advance!

Answer 1

try this :

<script>
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);

}
</script>

<a href="#" rel="nofollow" onclick="printDiv('unique_name')">Print label</a>

JsFiddle : https://jsfiddle.net/2m5ha1ta/67/

i don't know why on JsFiddle the onclick doesn't work, so i added an id to the a and added an eventListener to it and it's working ( check the fiddle )