Question

我正在使用java脚本打印功能，在点击时打印页面的预定义div。功能如下：

<head>
<script type="text/javascript">
function printDiv(any printable div) {      
var printContents = document.getElementById(any printable div).innerHTML;      
var originalContents = document.body.innerHTML;       
document.body.innerHTML = printContents;       
window.print();       
document.body.innerHTML = originalContents; 
} 
</script>
</head>

打印机表单输入法和可打印div如下：

<body>
<input type="button" class="button" onclick="printDiv('any printable div')" name="print" value="print" />
<div id = "any printable div"> On button click contents here are printed </div>
</body>

我也在同一页面上使用j-query文本选框/滚动条，根据功能执行任务

 $(document).ready(function(){

一切都可以独立完成。问题是文本选取框/滚动器在单击打印按钮时停止滚动文本。在刷新页面之前，滚动条无法滚动文本。所以我正在使用html元刷新，但这对访问者来说可能是一种烦人的体验。我也不想在iframe中使用滚动条。

此时我尝试了一些基于j-query和java脚本的解决方案。脚本刷新（只是淡入和淡出整个文本块）div是滚动器静默但实际上不能保持文本滚动。

是否有任何好的j-query或基于java脚本的解决方案可以根据上面在给定时间段内解释的情况静默刷新滚动条？

Answer 1

您的变量名称中不能包含空格。 function printDiv(any printable div)是语法错误。

尝试改为：

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

Answer 2

我假设您已经说过，这里的意图是只能打印某个div，而不是整个页面。如果是这种情况那么你真的会在这里极端地执行这个功能。

如果您只想制作一个更漂亮的页面版本（一个没有菜单等），请查看How can I have different CSS when I print or print preview?。该问题将说明如何使用一组不同的css进行打印，因此您可以将display:none;设置为打印时不想显示的任何内容。

如果您只想打印一个div，那么您可以查看jQuery print element plugin。这是一个简单的js文件，你在html中链接然后调用

$([selector]).printElement();

只打印该元素。例如，你可以这样重写你的方法：

function printDiv(anyPrintableDiv) { 
    $('#' + anyPrintableDiv).printElement();
}

使用单击功能后，在同一页面刷新div

2 个答案: