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

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

javascript html css

Javascript 如何打印HTML页面的选定部分？,javascript,html,css,Javascript,Html,Css,我试图用HTML打印选定的标记。我试着像这样使用CSS： .仅限屏幕{ 显示：无； } 你好内标签 “内部标签”未打印。这是一种有用的技术，但当存在分层的标记时，它会失败我还尝试了以下JavaScript：函数printContent（id）{ str=document.getElementById（id）.innerHTML； newwin=window.open（“”，'printwin'，'left=100，top=100，width=400，height=400'）； neww

我试图用HTML打印选定的

标记。我试着像这样使用CSS：


.仅限屏幕{
显示：无；
}
你好
内标签

“内部标签”未打印。这是一种有用的技术，但当存在分层的

标记时，它会失败

我还尝试了以下JavaScript：

函数printContent（id）{
str=document.getElementById（id）.innerHTML；
newwin=window.open（“”，'printwin'，'left=100，top=100，width=400，height=400'）；
newwin.document.write（'\n\n'）；
newwin.document.write（'Report\n'）；
newwin.document.write（'\n'）；
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'）；
write（'setTimeout（“chkstate（）”，2000）\n'）；
newwin.document.write（'}\n'）；
newwin.document.write（'}\n'）；
write（'function print_win（）{\n'）；
newwin.document.write（'window.print（）；\n'）；
newwin.document.write（'chkstate（）；\n'）；
newwin.document.write（'}\n'）；
newwin.document.write（'\n'）；
newwin.document.write（'\n'）；
newwin.document.write（'\n'）；
newwin.document.write（str）；
newwin.document.write（'\n'）；
newwin.document.write（'\n'）；
newwin.document.close（）；
}

然后通过

onclick

调用此函数。此脚本可以使用一个

标记，但不能使用多个标记。比如说


你好
使用者

只打印“你好”。在这种情况下，我应该怎么做？

基本上，问题在于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();
}

函数printContent（类名）{
var matchedElements=document.getElementsByClassName（className）；
var-str=''；
对于（变量i=0；i


您还需要稍微修改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应该是唯一的，如果您想以某种方式对元素进行分组-您可以为这些元素添加与上面示例中相同的类。
@BalusC-感谢BalusC正确地描述了我的问题：）