javascript - 是否可以使用 .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();
}

演示。