Question

我试图在HTML中打印选定的<div>标签。我尝试使用这样的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”。在这种情况下我该怎么办？

Answer 1

基本上问题是你的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应该是唯一的，如果你想以某种方式对元素进行分组 - 你可以为这些元素添加相同的类，就像上面的示例一样。

如何打印HTML页面的选定部分？

1 个答案: