想要使用JavaScript打印页面的特定部分

Want to print a particular section of a page using JavaScript

本文关键字：定部 打印 JavaScript      更新时间：2023-09-26

我的代码是基于Ben Nadel的这个解决方案

下面是页面

中包含的代码
<script type="text/javascript">
    // When the document is ready, initialize the link so
    // that when it is clicked, the printable area of the
    // page will print.
    $(function() {
        // Hook up the print link.
        $("a").attr("href", "javascript:void(0)").click(function() {
            // Print the DIV.
            $( ".printable" ).print();
            // Cancel click event.
            return(false);
        });
    });
</script>

这是一个codepen

按钮在笔中不工作，但在本地工作。

我要做的是让用户打印每个列表项的内容，你可以看出这是一个Q& a，所以实际上是让用户能够在点击按钮时打印每个Q& a对。

我只包含了两个，以提供最小的例子，以帮助我找出我的错误在哪里。

发生的事情是，无论我点击哪个按钮，它将始终打印第一个"li"与"printable"的类，我不知道如何区分每个部分，使按钮理解只打印"这个"，而不是第一个li的类，这是它正在做什么。

显然这是一个问题，因为每个答案都有一个"点击打印"按钮，我不希望它们都打印相同的Q& a pair。

这有意义吗?

我的直觉是有某种循环在播放或迭代数组，但我是非常新的JavaScript，所以我正在寻找一个适度具有挑战性的解决方案。

是的，它确实有意义，你正在选择要打印的元素，使用$('.printable').print([1]);它的意思是，打印第一个匹配我选择的元素，也就是。printable。第一个具有printable类的元素。您应该做的是将每个按钮与适当的部分绑定，并使用id而不是类来选择元素。因为id是唯一的!

function(){
        $('.printBtn').attr('href', 'javascript:void( 0 )').click(function(){
            //select the corresponding section, first parent li that have .printable class
            var section = $(this).closest("li.printable");
            // Print Div
            $(section).print([1]);
            // Cancel click event
            return(false);
        });

您可以使用简单的java脚本来打印页面的特定div 

    var prtContent = document.getElementById("your div id");
    var WinPrint = window.open('','','letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
相关文章：