打印预览显示每个打印命令上的重复项目

时间:2018-02-21 04:35:52

标签: javascript jquery html css

每当我点击打印并取消打印预览时,再次点击打印并在打印预览中显示双页。

这是正常行为还是要修复的内容,有人可以建议吗?

//Javascript for print on click
$('.print').on("click", function(e){
    var divElements = $(".printable-content").html();
    var iframe = $('<iframe class="hidden" id="printer"></iframe>').appendTo('body');
    var printer = $('#printer');
    printer.contents().find('body').append("<!DOCTYPE html><head><title>Print Title</title></head><body>" + divElements + "</body>");
    setTimeout(function() {  
        printer.get(0).contentWindow.print();
        printer.remove();

    }, 250);
});

<!DOCTYPE html>
<head>
    <title>Print Title</title>
</head>
<body>
    <div class="printable-content">
        <table>
            <tr>
                <td>
                    This is printtable content
                </td>
            </tr>
            <tr>
                <td>
                    This is printtable content
                </td>
            </tr>
            <tr>
                <td>
                    This is printtable content
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascipt:;" class="print"></a>
                </td>
            </tr>
        </table>
    </div>
</body>

1 个答案:

答案 0 :(得分:1)

请勿在setTimeout

中删除printer iframe

相反,你可以这样做

$('.print').on("click", function(e) {

    if ($("#printer").length) {
        $("#printer").remove();
    }

    var divElements = $(".printable-content").html();
    var iframe = $('<iframe class="hidden" id="printer"></iframe>').appendTo('body');
    var printer = $('#printer');
    printer.contents().find('body').append("<!DOCTYPE html><head><title>Print Title</title></head><body>" + divElements + "</body>");
    setTimeout(function() {  
        printer.get(0).contentWindow.print();

    }, 250);
});