javascript - 打印页面上的特定元素？

Question

我正在寻找打印页面的特定文本元素。目前，我在一页上有 10 张卡片，当用户选择打印特定卡片时，我只希望打印所选卡片。我正在使用 javascript:window.print()，但发现它打印了所有卡片。然而，我发现一段代码(如下)可以满足我的要求，但去掉了 Logo 。我尝试添加 document.getElementById('logo') 但它不起作用。也不知道如何将 Logo 添加为可打印区域。是否有一个 jQuery 方法可以在不使用插件的情况下处理这个问题？

HTML

<div class="container">
    <img id="logo" src="picture.jpg">
    <div class="card" id="card-a">Text <a href="" onclick="printDiv('card-a)">Print</a></div>
    <div class="card" id="card-b">Text <a href="" onclick="printDiv('card-b)">Print</a></div>
    <div class="card" id="card-c">Text <a href="" onclick="printDiv('card-c)">Print</a></div>
</div>

JS

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

Answer 1

只需在覆盖正文之前将其添加到 HTML 中即可:

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    var logoContent = document.getElementById("logo").outerHTML;

    document.body.innerHTML = logoContent + printContents;
    window.print();
    document.body.innerHTML = originalContents;
}