我正在尝试打印选定的 <div> HTML 中的标签。我试过像这样使用 CSS:
<style media="print">
.onlyscreen {
display: none;
}
</style>
<html>
<body>
<div class="onlyscreen">
<p>Hello</p>
<div>
<p> Inner tag</p>
</div>
</div>
<input type="submit" value="Print Report" onclick="window.print()">
</body>
</html>
不打印“内部标签”。这是一种有用的技术，但当存在分层时它会失败 <div>标签。
我也试过这个 JavaScript:
function printContent(id) {
str = document.getElementById(id).innerHTML;
newwin = window.open('', 'printwin', 'left=100,top=100,width=400,height=400');
newwin.document.write('<HTML>\n<HEAD>\n');
newwin.document.write('<TITLE>Report</TITLE>\n');
newwin.document.write('<script>\n');
newwin.document.write('function chkstate(){\n');
newwin.document.write('if(document.readyState=="complete"){\n');
newwin.document.write('window.close()\n');
newwin.document.write('}\n');
newwin.document.write('else{\n');
newwin.document.write('setTimeout("chkstate()",2000)\n');
newwin.document.write('}\n');
newwin.document.write('}\n');
newwin.document.write('function print_win(){\n');
newwin.document.write('window.print();\n');
newwin.document.write('chkstate();\n');
newwin.document.write('}\n');
newwin.document.write('<\/script>\n');
newwin.document.write('</HEAD>\n');
newwin.document.write('<BODY onload="print_win()">\n');
newwin.document.write(str);
newwin.document.write('</BODY>\n');
newwin.document.write('</HTML>\n');
newwin.document.close();
}
然后通过onclick调用这个函数.此脚本适用于一个 <div>标签，但不包含多个标签。例如
<html>
<body>
<div id="print_thistag">
<p>Hello</p>
</div>
<div id="print_thistag">
<p>User</p>
</div>
<input type="submit" value="Print Report" onclick="printContent('print_thistag')">
</body>
</html>
只打印“Hello”。遇到这种情况怎么办？
最佳答案
基本上，问题在于您的 printContent 函数的设计方式使其仅适用于单个元素。
您可以更改您的函数，使其不接受元素的 id，而是接受 css 类名，如下例所示
function printContent(className) {
var matchedElements = document.getElementsByClassName(className);
var str = '';
for (var i = 0; i < matchedElements.length; i++) {
var str = str + matchedElements[i].innerHTML;
}
var newwin = window.open('', 'printwin', 'left=100,top=100,width=400,height=400');
newwin.document.write('<HTML>\n<HEAD>\n');
newwin.document.write('<TITLE>Report</TITLE>\n');
newwin.document.write('<script>\n');
newwin.document.write('function chkstate(){\n');
newwin.document.write('if(document.readyState=="complete"){\n');
newwin.document.write('window.close()\n');
newwin.document.write('}\n');
newwin.document.write('else{\n');
newwin.document.write('setTimeout("chkstate()",2000)\n');
newwin.document.write('}\n');
newwin.document.write('}\n');
newwin.document.write('function print_win(){\n');
newwin.document.write('window.print();\n');
newwin.document.write('chkstate();\n');
newwin.document.write('}\n');
newwin.document.write('<\/script>\n');
newwin.document.write('</HEAD>\n');
newwin.document.write('<BODY onload="print_win()">\n');
newwin.document.write(str);
newwin.document.write('</BODY>\n');
newwin.document.write('</HTML>\n');
newwin.document.close();
}
你还需要稍微修改一下 html
<html>
<body>
<div class="print_thistag">
<p>Hello</p>
</div>
<div class="print_thistag">
<p>User</p>
</div>
<input type="submit" value="Print Report" onclick="printContent('print_thistag');">
</body>
</html>
它将按您的预期工作 - 将每个 div 内容聚合到一个将被打印的 html 字符串中。
顺便说一下，为多个元素分配相同的 id 不是一个好的做法 - id 应该是唯一的，如果你想以某种方式对元素进行分组 - 你可以为这些元素添加与上面示例中相同的类。
关于javascript - 如何打印 HTML 页面的选定部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8159223/