如何打印特定的div？

问题描述

我目前正在使用ESRI的工具（特别是WebAppBuilder https://doc.arcgis.com/es/web-appbuilder/）进行项目开发。我们已经制作了某种仪表盘，它是这样的：

我需要报告仪表盘中的当前内容，因此我必须拿下面板和地图，然后重新排列以制作出pdf文件。

我已经尝试使用css类，但是它无法正常工作，因为我无法控制仪表板上的内容，因此无法为我要打印或重新排列的类分配类。

我尝试选择类似的元素

  const printContent = document.getElementById("report-container").outerHTML;

  const originalContent = document.body.innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;

但是它也不起作用，它不显示面板，当我回来时，仪表板发疯了。

所以，我没主意了。我需要某种方式来抓住div，重新排列并打印它们。

解决方法

如果每个面板之间共享一个类，则可以使用document.querySelectorAll(".{whatever panel class name is}")

如果存在此类，它将为您提供具有该类名称的所有元素的NodeList。

,

您可以临时分配display:none css属性，以从打印结果中删除元素，然后将display属性重置为原始值

es document.getElementById(ID).style.display = “none”;

如果您需要在不同位置打印元素，则需要创建适当的html并使其仅通过@media print 媒体查询才能显示