如何打印HTML頁面的選定部分？

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 個解決方案

解決方案1
7 已采納 2011-11-17 01:01:49

如何打印HTML頁面的選定部分？

問題描述

1 個解決方案

解決方案1 7 已采納 2011-11-17 01:01:49

解決方案1
7 已采納 2011-11-17 01:01:49