如何打印特定的div？答案

【问题标题】：How to print an specific div?如何打印特定的div？
【发布时间】：2021-01-09 03:00:31
【问题描述】：

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

【问题讨论】：

标签： javascript printing dashboard esri arcgis-js-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：