如何打印特定的div？

Question

I'm currently working on a project using tools from ESRI, specifically with WebAppBuilder https://doc.arcgis.com/es/web-appbuilder/ . We have some sort of dashboard already made, this is how it looks like:

I need to make a report of what's currently in the dashboard, so i have to take the panels and the map, and rearrange it to make a pdf file out of it.

I've already try using a css class but it doesn't work because i have little control over what's on the dashboard, so I can't assign a class to what i want to print or rearrange it.

I've try to select the element with something like

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

  const originalContent = document.body.innerHTML;

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

But it doesn't work either, it doesn't show the panels and when i came back the dashboard goes crazy.

So, I'm out of ideas. I need someway to grab the div, rearrange them and print them.

Answer 1

If there is a class that is shared among every panel, you can use document.querySelectorAll(".{whatever panel class name is}")

if such class exists, this will give you NodeList with all the elements that have that class name.

Answer 2

You can assign the display:none css property temporarily to remove the elements from the print result and after reset the display property to the original value

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

If you need to print the elements in different position you need to create the appropriate html and make it visibile only for print by @media print media query