在页面上打印特定元素?

时间:2014-10-23 01:23:55

标签: javascript jquery

我希望打印页面的特定文本元素。我目前在一个页面上有10张卡片,当用户选择打印特定卡片时,我只想要选择的卡片进行打印。我正在使用javascript:window.print(),但发现它打印了所有卡片。然而,我找到了一个代码片段(下面),它做了我想要的,但剥去了徽标。我尝试添加document.getElementById('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;
}

1 个答案:

答案 0 :(得分:2)

在覆盖正文之前,只需将其添加到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;
}