Question

我花了一整天的时间来解决我的需求，但由于我不是一位经验丰富的编码员，现在是时候让我们向你们寻求帮助。

我的情景是：我有一些像PHP代码：

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

我想要实现的是将“unique_name”div（qrcode和一些附加信息）的内容直接打印到我的智能手机和PC上通过无线连接的标签打印机，打印机在宽度为62mm的连续纸上打印。

我已经尝试了很多代码但是没有成功，因为有关window.print（）的浏览器行为

以下代码在PC上使用firefox和chrome，但它不适用于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>

我坚持这一点，我认为像将unique_name div的内容转换为图像，保存并在此之后打印它应该有效，但有很多步骤要做，我们想要更容易地做到这一点点击和打印或点击和弹出然后打印，最重要的是它需要在移动浏览器上工作

提前谢谢！

Answer 1

我不知道原因究竟是什么，但显然在Safari中，Window.print是在操纵DOM之前执行的，尝试将window.print()放入timeout：

将此行window.print();替换为setTimeout(window.print, 1000);

给它一些时间打印，然后放回原始内容:)

setTimeout(function(){
    document.body.innerHTML = originalContents;
}, 2000)

你可以玩超时的毫秒数，直到你获得最佳点，它不必是2000。

Answer 2

试试这个：

<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/

我不知道为什么在JsFiddle上onclick无法正常工作，所以我在id添加了a并添加了eventListener它和它的工作（检查小提琴）

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

2 个答案: