How to print contents of InfoWindow/Popup?

JoanSteinbacher · ‎04-04-2013

What's the easiest way to print the contents of an InfoWindow or Popup? I would think that ESRI would add a "print" link as an option (similar to the "Zoom to" link that's provided in the Popup). Am I missing something easy or do I have to code this myself somehow?

Thanks!

RobertBorchert · ‎04-04-2013

I don't think you can print from the Info Window, though I agree it could be handy.

However you can select all in the info window and right click and select copy. Then paste the copy into an Excel document and print it from there.

What's the easiest way to print the contents of an InfoWindow or Popup? I would think that ESRI would add a "print" link as an option (similar to the "Zoom to" link that's provided in the Popup). Am I missing something easy or do I have to code this myself somehow?

Thanks!

KellyHutchins · ‎04-05-2013

One option would be to add a new link to the popup window that allows users to print the popup contents. You can add a new link next to the existing popup zoomTo link. Here's an jsfiddle that shows this:

http://jsfiddle.net/drUvW/

And here's info on how it works:

         var printLink = dojo.create("a", {
          "class": "action",
          "innerHTML": "Print",
          "href": "javascript:void(0);"
          }, dojo.query(".actionList", map.infoWindow.domNode)[0] );

Next register a function that will be executed when the print link is clicked:

        dojo.connect(printLink, "onclick", printPopupContents);

In the function you can get the selected feature then use the getContent method to get the info window contents for that feature.

    function printPopupContents(){
      var feature = map.infoWindow.getSelectedFeature();
      var popupContent = feature.getContent();

      //write contents to new page for printing
      var newWindow = window.open("", "PopupContents");
      console.log(popupContent);
      newWindow.document.write(popupContent);


    }

AlexGilvarry · ‎04-08-2013

It'd be really helpful if the print option captured popup windows. We used to use the Flex API and it had that capability, so everyone is used to having that available.

JoanSteinbacher · ‎04-09-2013

Kelly,

Thanks for the reply and code. It was a big help. I copied it into my app (based on the Basic Viewer template), but for some reason your "printPopupContents" function didn't work for me. I got the following in Firebug:

[INDENT]-->inside printPopupContents
popupContent: [object HTMLDivElement]
<div id="esri_dijit__PopupRenderer_1" class="esriViewPopup" widgetid="esri_dijit__PopupRenderer_1">[/INDENT]

The browser window that opened showed:
[INDENT][object HTMLDivElement][/INDENT]

Not sure what's happening there...

But, I created my own "printPopupContents" function and used the class attribute to query the dom element (the table inside the popup). Clunkier than your code but it seems to work fine. Here's my function, maybe it helps someone else.

function printPopupContents(){
  console.log("-->inside printPopupContents");
  
  var popupTable = dojo.query(".attrTable");
  console.log("popupTable.length: " + popupTable.length);
  console.log("popupTable[0].innerHTML: " + popupTable[0].innerHTML);
  popupTableContent = "<table>" + popupTable[0].innerHTML + "</table>";
  
  popupContent = '<html><head><title>Rezoning Print Window</title>';
  /*optional stylesheet*/ 
  //popupContent += '<link rel="stylesheet" type="text/css" href="css/rezoning.css" />';
  popupContent +='</head><body>';
  popupContent += popupTableContent
  popupContent +='</br><div>';
  popupContent += configOptions.owner;     
  popupContent +='</div>';        
  popupContent +='</body></html>';
  
  //write contents to new page for printing
  var newWindow = window.open("", "PopupContents");
  console.log(popupContent);
  newWindow.document.write(popupContent);
  
}

RyanBohan · ‎10-29-2021

Does anyone know the 4x equivalent for this code? It looks like what I need to grab the pop-up contains and populate a new page for printing

    function printPopupContents(){
      var feature = map.infoWindow.getSelectedFeature();
      var popupContent = feature.getContent();

      //write contents to new page for printing
      var newWindow = window.open("", "PopupContents");
      console.log(popupContent);
      newWindow.document.write(popupContent);