Question

我试图打印指定的div或表，并且它在测试文件中正常工作。但是当我在原始页面中写出确切的代码片段时，它说document.getElementById（＆＃39; printable＆＃39;）返回null。我知道这意味着什么......它没有找到我的元素的id。所以然后我搜索并写了$（document）.ready（）;并且该错误已停止。但由于这个原因，整个页面被打印（而不是指定的页面）。我还尝试在我的“可打印”之后编写脚本。 div然后它给出相同的空错误.. 任何人都可以帮助我。我们将不胜感激。并请尝试给出如下语法的答案，我的意思是不要改变整个代码只是告诉我我错过了什么。谢谢我只是想知道为什么它说无效，即使我在可打印的div之后编写脚本，如果我添加就绪函数为什么它会打印整个页面？

<head>
<script>

function print(){

var org=document.body.innerHTML;
var spc=document.getElementById("printable").innerHTML;
document.body.innerHTML= spc;
window.print();
document.body.innerHTML= org;


}


</script>
</head>
<body>
<table id="printable">
<tr>Only this should be printed</tr>
</table>

<div id="print-btn">
<button onclick="print()">Print</button>
</div>

</body>

Answer 1

更好的方法可能是使用css媒体选择器删除您不想要打印的内容。例如：

<head>
<style>
    @media print {
        #print-btn {
            visibility: hidden;
        }
    }
</style>
</head>
<body>
<table id="printable">
    <tr><td>Only this should be printed</td></tr>
</table>
<div id="print-btn">
    <button onclick="javascript:window.print()">Print</button>
</div>

</body>

然后你就可以打印页面了。

另外，从您的示例来看，您似乎正在使用自己的方法重新定义window.print函数。澄清一下，

function print() {
    ...

相当于

window.print = function() {
    ...

Answer 2

页面由浏览器自上而下呈现。当你的脚本运行时，div还没有存在。将脚本移动到body标记的底部，或者在页面加载后使用事件监听器来运行脚本。

JS：

function runScripts() {
  // do your stuff
}

HTML：

<body onload="runScripts()">

Answer 3

使用媒体查询@media print，将类.printable添加到应打印的任何内容，并使用按钮调用javascript:window.print()。

<head>
<style>
    @media print {
        .*{
            display: none;
        }
        .printable {
            display: block;
        }
    }
</style>
</head>
<body>
<table class="printable">
    <tr><td>This should be printed</td></tr>
</table>
<p class="printable">So should this</p>
<p>But not this</p>
<div class="printable">
    <p>And all</p>
    <p>of this</p>
</div>
<div id="print-btn">
    <button onclick="javascript:window.print()">Print</button>
</div>
<script>/* by the way, this is where javascript belongs */</script>
</body>

打印特定div时出错

3 个答案: