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

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

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

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

当前回答

总的来说，这些答案我都不太喜欢。如果你有一个类(比如printableArea)，并把它作为body的直接子类，那么你可以在你的print CSS中这样做:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

对于那些在其他地方寻找printableArea的人，你需要确保显示printableArea的父元素:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

使用可见性可能会导致大量间距问题和空白页面。这是因为可见性保持了元素的空间，只是将其隐藏起来，而在显示时将其移除，并允许其他元素占用其空间。

这个解决方案有效的原因是您不需要抓取所有元素，只需要将body的直接子元素隐藏起来。下面的其他解决方案使用display css，隐藏所有元素，这将影响printableArea内容内的所有内容。

我不建议使用javascript，因为你需要有一个用户点击的打印按钮，而标准的浏览器打印按钮不会有同样的效果。如果你真的需要这样做，我会做的是存储主体的html，删除所有不需要的元素，打印，然后添加回html。如前所述，我将避免这种情况，如果你可以和使用CSS选项如上所述。

注意:你可以添加任何CSS到打印CSS使用内联样式:

<style type="text/css">
@media print {
   //styles here
}
</style>

或者像我通常使用的链接标签:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

2013-07-23 15:02:28

其他回答

到目前为止，所有的答案都是有缺陷的——它们要么涉及在所有内容中添加class="noprint"，要么会在#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中移动一些东西……

2009-01-22 12:28:28

我的方法-简单的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

我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…

2009-02-03 13:06:46

It's better solution. You can use it Angualr/React

Html

 <div class="row" id="printableId">
      Your html 
    </div>

Javascript

   function printPage(){
        
        var printHtml = window.open('', 'PRINT', 'height=400,width=600');
    
        printHtml.document.write('<html><head>');
        printHtml.document.write(document.getElementById("printableId").innerHTML);
        printHtml.document.write('</body></html>');
    
        printHtml.document.close(); 
        printHtml.focus(); = 10*/
    
        printHtml.print();
        printHtml.close();
    
        return true;
    
      }

2021-07-27 12:01:05

我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS，要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案，既不丢失CSS，也适用于所有浏览器。

Html

<div class="row" id="print-div">
      Your html 
    </div>

打印稿

let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
    .write(`<html>
     ${printHead}
    <body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();

2022-02-15 11:05:59

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

推荐文章

最新文章

标签