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

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

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

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

当前回答

这里有一个通用的解决方案，只使用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，那么它的后代也不会显示。要使用它，您必须更改页面的结构。

使用可见性效果更好，因为您可以为后代打开可见性。但是，不可见的元素仍然会影响布局，所以我将section-to-print移到左上角，以便正确打印。

2010-04-11 22:39:26

其他回答

适合空间空高度的最佳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

Give whatever element you want to print the id printMe. Include this script in your head tag: <script language="javascript"> var gAutoPrint = true; function processPrint(){ if (document.getElementById != null){ var html = '<HTML>\n<HEAD>\n'; if (document.getElementsByTagName != null){ var headTags = document.getElementsByTagName("head"); if (headTags.length > 0) html += headTags[0].innerHTML; } html += '\n</HE' + 'AD>\n<BODY>\n'; var printReadyElem = document.getElementById("printMe"); if (printReadyElem != null) html += printReadyElem.innerHTML; else{ alert("Error, no contents."); return; } html += '\n</BO' + 'DY>\n</HT' + 'ML>'; var printWin = window.open("","processPrint"); printWin.document.open(); printWin.document.write(html); printWin.document.close(); if (gAutoPrint) printWin.print(); } else alert("Browser not supported."); } </script> Call the function <a href="javascript:void(processPrint());">Print</a>

2009-05-08 23:37:08

没有CSS小丑，html和纯javascript与iframe工作最好。然后只需点击文本，你想打印。带有文本内容的id元素的当前示例;

html的身体:

<div id="monitor" onclick="idElementPrint()">text i want to print</div>

纯javascript:

//or: monitor.textContent = "click me to print textual content";

const idElementPrint = () => {
    let ifram = document.createElement("iframe");
    ifram.style = "display:none";
    document.body.appendChild(ifram);
    pri = ifram.contentWindow;
    pri.document.open();
    pri.document.write(monitor.textContent);
    pri.document.close();
    pri.focus();
    pri.print();
    }

2020-11-10 16:51:12

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

您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。

2009-01-22 12:12:20

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

推荐文章

最新文章

标签