如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？答案

【问题标题】：How to print a specific HTML element and not the full page in Chrome or Firefox?如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？
【发布时间】：2016-07-12 05:41:55
【问题描述】：

假设我想打印（或转换为 PDF）复杂 HTML 页面的特定区域（例如，div）。如何在 Chrome 或 Firefox 中做到这一点？我没有从“检查元素”功能中找到特定选项。

【问题讨论】：

标签： html google-chrome firefox pdf printing

【解决方案1】：

我知道这是一个相当古老的话题，但这里对我有用：

<div id="parent_div">
    <p>NOT to be printed</p>
    <div id="print_div">
        Print this!
    </div>
    <button id="print_now" onclick="PrintDiv('print_div')">
</div>

还有JS函数：

function PrintDiv(div_id) {
    $('body').css("visibility", "hidden");
    $("#"+div_id).css("visibility", "visible");
    window.print();
    $('body').css("visibility", "visible");    
}

如果您不使用 jQuery，您仍然可以使用以下方式更改 CSS：

document.getElementById("body").style.visibility = "hidden";
document.getElementById(div_id).style.visibility = "visible";

【讨论】：

【解决方案2】：

试试这个。我也在stackoverflow中找到了这个:)

试试这个，这是解决问题的好例子

函数 PrintElem(elem) { 弹出($(elem).html()); }

        function Popup(data) 
        {
            var mywindow = window.open('', 'my div', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            mywindow.document.close(); // necessary for IE >= 10
            mywindow.focus(); // necessary for IE >= 10

            mywindow.print();
            mywindow.close();

            return true;
        }

    </script>
</head>
<body>
    <div id="mydiv">
        This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherdiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
</body>

【讨论】：

没有集成解决方案吗？

【解决方案3】：

通过使用仅打印media query，这是introduced in CSS3 的一项功能

假设它由id 或class 选择器标识，则将display: none 应用于它，而不是visibility: hidden，因为显示不仅控制元素的显示，还控制占用的空间在文档中，与可见性不同，可见性隐藏它但仍然让它占据它的空间。

所以它应该看起来像这样：

#container {
  background-color: blue;
  padding: 1rem;
}

#display-test {
  background-color: lightgreen;
}

#visibility-test {
  background-color: lightblue;
}

#display-test,
#visibility-test {
  color: white;
  padding: 1rem;
  margin: 1rem 0 1rem 0;
}

#print-display-test,
#print-visibility-test {
  color: white;
  display: none;
}

@media only print {
  #display-test {
    display: none;
  }
  
  #visibility-test {
    visibility: hidden;
  }
  
  #print-display-test,
  #print-visibility-test {
    display: block;
  }
}

<div id="container">
  <div id="display-test">
    This is a display test
  </div>
  <span id="print-display-test">
    This is going to show at the start of the page
  </span>
  <div id="visibility-test">
    This is a visibility test
  </div>
  <span id="print-visibility-test">
    This is going to show far apart from the text above
  </span>
  <br>
  <button type="button" onclick="window.print()">
    Print this
  </button>
</div>

【讨论】：