首页猿问只打印<div...

只打印<div id=“printrea”></div>？

JavaScript Html/CSS

慕的地6264312 2019-06-17 15:03:08

只打印<div id=“printrea”></div>？如何打印指定的div(而不手动禁用页面上的所有其他内容)？我想避免一个新的预览对话框，所以创建一个新的窗口使用这个内容是没有用的。该页包含两个表，其中一个包含我想打印的div-表的样式是视觉样式的网页，不应该显示在打印。

查看完整描述

3 回答

波斯汪

TA贡献1811条经验获得超4个赞

下面是一个通用的解决方案，使用仅CSS我已经证实了这一点。

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }}

另一种方法不是很好。使用display是很棘手的，因为如果任何元素display:none那么它的后代也不会展示。要使用它，您必须更改页面的结构。

使用visibility工作更好，因为您可以打开可见性的后代。无形的元素仍然影响布局，所以我移动section-to-print

反对回复 2019-06-17

Cats萌萌

TA贡献1805条经验获得超9个赞

我有一个更好的解决方案，用最少的代码。

将可打印的部分放入具有如下ID的div中：

<div id="printableArea">
      <h1>Print me</h1></div><input type="button" onclick="printDiv('printableArea')" value="print a div!" />

然后添加一个类似onClick的事件(如上面所示)，并像上面一样传递div的id。

现在，让我们创建一个非常简单的javascript：

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;}

注意到这有多简单？没有弹出窗口，没有新窗口，没有疯狂的样式，没有像jQuery这样的JS库。真正复杂的解决方案(答案并不复杂，也不是我所指的)的问题在于，它永远不会在所有浏览器上翻译！如果希望使样式有所不同，请按照选中的答案中所示，将media属性添加到样式表链接(media=“print”)中。

没有绒毛，重量轻，它只是起作用了。

反对回复 2019-06-17

偶然的你

TA贡献1841条经验获得超3个赞

到目前为止，所有的答案都有很大的缺陷-它们要么包括添加class="noprint"为了一切，否则就会搞砸display内#printable.

我认为最好的解决方案是围绕不可打印的内容创建一个包装器：

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style></head><body>
    <div id="non-printable">
        Your normal page contents    </div>

    <div id="printable">
        Printer version    </div></body>

当然，这并不完美，因为它涉及到在HTML中移动一些东西.

反对回复 2019-06-17

3 回答
0 关注
472 浏览

关注

只打印<div id=“printrea”></div>？

只打印<div id=“printrea”></div>？

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

只打印<div id=“printrea”></div>？

只打印<div id=“printrea”></div>？

3 回答

相关问题推荐

添加回答