如何打印特定的div？

Question

我目前正在使用 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，重新排列它们并打印它们。

Answer 1

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

如果存在这样的类，这将为您提供包含具有该类名称的所有元素的 NodeList。

Answer 2

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

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

如果您需要在不同的位置打印元素，您需要创建适当的 html 并使其仅在@media print媒体查询时可见