是否可以使用.print（）函数从特定选择器打印内容？

Question

是否可以从特定的CSS / DOM选择器元素打印内容，比如说：

var elem = document.getElementById('div'); // where div innerHTML contains: Hello, Mars!
elem.print();

是否可以使用JavaScript打印文档的特定部分，而不是整个页面？

Answer 1

您可以使用@media选择要打印的元素。

@media print{
    .dontPrint{
        display: none;
    }
}

<p>You will see me!</p>
<p class="dontPrint">You won't see me!</p>
<button>Print</button>

$("button").click(function(){
    print();
});

Demo

---

  

如您所见，带有.dontPrint的元素将不会显示在打印预览中。您可以在不希望它出现的所有元素上应用此类。

---

替代

@media print{
    .dontPrint{
        display: none;
    }
}

<p>You will see me!</p>
<p>You won't see me!</p>
<button>Print</button>

$("button").click(function(){
    printTarget($("p:eq(0)"));
});

function printTarget(ele){                    //input target element(s)
    $(ele).data({print: true});
    $("body *").filter(function(){
        console.log($(this).data().print);
        return !$(this).data().print;
    }).addClass("dontPrint");
    print();
    $("*").removeClass("dontPrint");
}

Demo

Answer 2

作为替代方案，您可以尝试此操作（使用其他窗口）

function print()
{
    var printWin = window.open();
    printWin.document.write(document.getElementById('printable_div').innerHTML);
    printWin.print();
    printWin.close();
}

DEMO.