打印<div id="printarea"></div> only?

如何打印指定的div(无需手动禁用页面上的所有其他内容)?

我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。

该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。

当前回答

你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。

参见CSS设计:准备打印以获得更多的解释和示例。

2009-01-22 12:14:16

其他回答

使用jQuery，它就像这样简单:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

2009-11-06 12:57:54

桑德罗的方法很有效。

我对它进行了调整，以允许多个printMe链接，特别是在选项卡页面和扩展文本中使用。

function processPrint(printMe){<——在这里调用一个变量

var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量

< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上，将printMe变量转换为div ID。需要单引号

2009-06-19 19:58:57

所有答案都有利弊，不能用于所有情况。它们分为三类:

使用打印样式表。这就要求整个网站都能识别打印。隐藏<body>中的所有元素，只显示可打印的元素。这对于简单的页面很有效，但是对于复杂的页面就有些棘手了。打开一个包含可打印元素内容的新窗口，或者将<body>内容替换为元素内容。第一种会丢失所有的风格，第二种是混乱的，可能会破坏事件。

There is no one solution that will work well for all cases, so it is good to have all those choices and I'm adding another solution that works much better in some cases. This solution is a hybrid of two categories: hide all content of <body>, then copy the content of the printable element to a new <div> and append it to <body>. After printing, remove the newly added <div> and show the content of <body> back. This way, you won't lose the styles or events, and you don't mess up with opening a new window. But like all other solutions, it won't work well for all cases. If your printable element's styles depends on its parents, you'll lose those styles. It is still much easier to style your printable elements independently from its parents than having to style the entire website for printing.

唯一的障碍是如何选择<body>的所有内容。对于简单的页面，通用样式体>*就可以了。然而，复杂的页面通常在正文的末尾有<script>标记'，也有一些'标记用于对话框等。隐藏所有这些都是可以的，但是在打印后不希望显示它们。

在我的情况下，我建立所有的网站与三个部分内<体>:<头>，<脚>，和他们之间<div id="内容">。根据您的情况调整下面函数的第一行:

function PrintArea(selector) {
    //First hide all content in body.
    var all = $("body > header, body > #Content, body > footer")
    all.hide();
    //Append a div for printing.
    $("body").append('<div id="PrintMe">');
    //Copy content of printing area to the printing div.
    var p = $("#PrintMe");
    p.html($(selector).html());
    //Call the print dialog.
    window.print();
    //Remove the printing div.
    p.remove();
    //Show all content in body.
    all.show();
}

我使用jQuery是因为它更干净、更简单，但如果您愿意，也可以轻松地将其转换为普通的JavaScript。当然，对于局部变量，你可以把var改成let。

2021-06-09 17:37:16

适合空间空高度的最佳css:

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

2018-04-19 08:20:53

我的方法-简单的CSS和JS。也适用于React/NextJS。

  const handlePrint = e => {
    e.preventDefault();
    const bodyElement = document.getElementsByTagName('body')[0];

    bodyElement.classList.add('printing');
    window.print();
    bodyElement.classList.remove('printing');
  };


.printing {
  visibility:hidden;
}

.printView {
  visibility:visible;
}

.printing .printView {
  /* You can have any CSS here to make the view better on print */
  position:absolute;
  top:0;
}

它能做什么?

将.printing类添加到body元素。在CSS中，我们用可见性隐藏所有正文内容:hidden; 与此同时，我们用.printing . printview保持CSS的就绪状态，以便为打印区域提供我们想要的任何类型的视图。触发window.print (); 当用户取消/ prints时，从body元素中删除.printing类。

例子:


<button onclick="handlePrint">
    Download PDF
</button>

<div>
    <h1>Don't print this</h1>

    <div class="printView">Print this</div>
</div>

如果这对任何人有帮助，请告诉我:)

2022-07-07 10:25:11

打印<div id="printarea"></div> only?

推荐文章

最新文章

标签