Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/466.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在页面上打印特定元素?_Javascript_Jquery - Fatal编程技术网

Javascript 在页面上打印特定元素?

Javascript 在页面上打印特定元素?,javascript,jquery,Javascript,Jquery,我希望打印页面的特定文本元素。目前,我在一个页面上有10张卡片,当用户选择打印特定卡片时,我只希望打印所选的卡片。我使用的是javascript:window.print(),但发现它可以打印所有卡片。然而,我发现了一段代码(如下),它符合我的要求,但去掉了徽标。我尝试添加document.getElementById('logo'),但它不起作用。也不知道如何将徽标添加为可打印区域。有没有一个jQuery方法也可以不使用插件来处理这个问题 HTML <div class="contain

我希望打印页面的特定文本元素。目前,我在一个页面上有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>

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

你找到的解决方案很糟糕。它现在可能“起作用”,但以后可能会破坏东西。你应该做的只是隐藏你不想要的内容。我不能给出一个确切的解决方案,因为我不知道这是否是你的整个页面。我确实创建了一个插件来做这个事情(相当小,有很多选项)@Jason,我尝试了你的插件(在另一篇文章中找到了链接),但可能做了一些错误的事情,因为CSS没有被读取。如果我有问题的话,我会再试一试,形成一个新的问题。谢谢你的评论。我注意到没有任何打印样式(CSS)被阅读。可能吗?
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;
}