Esri ArcGIS Print the map

Question

I am using ArcGIS javaScript 3.5 and i want to implement the print map.I know it is a in-built tool we can use that service also but my problem is to implement the all three step(Print,Printing,PrintOut) in one click (Prefer some other click).

for that purpose i did something like---

first i added one div in design level and set visiblity as false

   <div id="print_button" style="visibility:hidden;display:none;"></div>

In init i use esri.dijit.Print option

        var app = {};
        app.webmapId = "8315cf7d20f0484e869c4791f70f4f15";
        app.printUrl = "abc/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

        var layouts = [{
            "name": "Letter ANSI A Landscape",
            "label": "Landscape (PDF)",
            "format": "pdf",
            "options": {
                "legendLayers": [], // empty array means no legend
                "scalebarUnit": "Miles",
                "titleText": "Map"
            }
        }];
        var templates = [];
        dojo.forEach(layouts, function (lo) {
            var t = new esri.tasks.PrintTemplate();
            t.layout = lo.name;
            t.label = lo.label;
            t.format = lo.format;
            t.layoutOptions = lo.options
            templates.push(t);
        });


        app.printer = new esri.dijit.Print({
            "map": map,
            "templates": templates,
            url: app.printUrl,
        }, dojo.byId("print_button"));
        app.printer.startup();

and in my click internally i want to click this print button

function export1() { 
        document.getElementById('print_button').click();//This is not working obviously this is not a button        
        return false;
    }

How can i achive this. Please help me.

After Anyalysis this div i found these elements

<div class="esriPrint">
<span class="dijit dijitReset dijitInline dijitButton esriPrintButton dijitButtonDisabled dijitDisabled" 
    role="presentation" widgetId="dijit_form_Button_0">
    <span class="dijitReset dijitInline dijitButtonNode" role="presentation" data-dojo-attach-event="ondijitclick:_onClick">
        <span disabled="" class="dijitReset dijitStretch dijitButtonContents" id="dijit_form_Button_0" role="button" aria-disabled="true" 
          aria-labelledby="dijit_form_Button_0_label" style="-ms-user-select: none;" data-dojo-attach-point="titleNode,focusNode">
            <span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode">
            </span>

            <span class="dijitReset dijitToggleButtonIconChar">
            ●
            </span>

            <span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">
            Printing
            </span>
        </span>
    </span>
    <input tabindex="-1" disabled="" class="dijitOffScreen" role="presentation" type="button" value="" data-dojo-attach-point="valueNode">
</span></div>


<div class="esriPrint">
<span class="dijit dijitReset dijitInline dijitButton esriPrintButton" role="presentation" widgetId="dijit_form_Button_1">
    <span class="dijitReset dijitInline dijitButtonNode" role="presentation" data-dojo-attach-event="ondijitclick:_onClick">
        <span tabindex="0" class="dijitReset dijitStretch dijitButtonContents" id="dijit_form_Button_1" 
        role="button" aria-labelledby="dijit_form_Button_1_label" style="-ms-user-select: none;" data-dojo-attach-point="titleNode,focusNode">

            <span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode">
            </span>
            <span class="dijitReset dijitToggleButtonIconChar">
            ●
            </span>
            <span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">
            Print
            </span>
        </span>
    </span>
<input tabindex="-1" class="dijitOffScreen" role="presentation" type="button" value="" data-dojo-attach-point="valueNode">
</span></div>

but how can i call this click event because it simple to find the element but it is not simple to call click event or i dont know how to call data-dojo-attach-event="ondijitclick:_onClick" this event ?

Can u suggest me how to call this event ?

technically nice joke @Juffy but this is not the right time to do . if u have any answer then post.... — Rahul Gupta, Jun 20 '13 at 04:13
Granted, it wasn't helpful. And maybe there's a failure in translation, but waiting just 7 hours (remembering that this is a global site, and some of us were asleep) before demanding an answer isn't going to win you any friends. :) — Juffy, Jun 20 '13 at 05:26

Juffy · Accepted Answer · 2013-06-20T07:38:12.273

1

While this is not a complete answer, I think the reason your .click() is failing is because you're 'clicking' the wrong thing. In the source code of my map, all I have is:

<div id="printButton"></div>

but at runtime Dojo expands that out to:

<div id="printButton">
  <div class="esriPrint">
    <span class="dijit dijitReset dijitInline esriPrintButton dijitButton" role="presentation" widgetid="dijit_form_Button_0">
      <span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:_onClick" role="presentation">
...etc

and note the data-dojo-attach-event tag on the second <span> tag. I would look at locating that <span> tag and seeing if you can raise a click event on it.

EDIT:

Yep, .click()ing the correct element DOES fire the print task, I've just tried it in my own application. I use jQuery extensively, so I used the selector #printButton .dijitInline to find any element with the class .dijitInline which is a child of the <div id="printButton">:

$('#printButton .dijitInline').click();

...and that fired off the print task exactly as if I'd clicked the button with the mouse. You should be able to use the dojo equivalent to find the right element and click it.

edited Jun 20 '13 at 07:38

answered Jun 20 '13 at 05:25

Juffy

1,220
13
22

Thanks @Juffy for reply again. And i know that this document.getElementById('print_button').click() will not work because it is a div. – Rahul Gupta Jun 20 '13 at 06:10
No, it's not because it's a div - div's are perfectly click'able. It's because there's no onClick() behaviour defined for that div, the intelligent part is in a child node. – Juffy Jun 20 '13 at 07:34
I used like: require(["dojo/query", "dojo/dom"], function (query, dom) { var node = dom.byId("print_button"); nl = query(".dijitButtonNode", node); if (nl.length > 0) nl[0].click(); }); – Rahul Gupta Jun 20 '13 at 09:59
Is there any other way like direct call print event which that print_button is using... because i am getting so many problem.. – Rahul Gupta Jun 24 '13 at 08:09
Hello there i am trying to call PrintingTools (GPServer) - Export Web Map Task - execute manually . for that purpose i need to change my map object into json object (Web Map as JSON:(GPString)). this is the first argument. so i can construct the json object manually but is there any method to get Json object directly in Arcgis javascript 3.5 APIs ? – Rahul Gupta Jun 24 '13 at 12:49
Umm...there's plenty of [existing](http://stackoverflow.com/questions/6810084/encoding-javascript-object-to-json-string) [questions](http://stackoverflow.com/questions/10919965/how-do-i-encode-a-javascript-object-as-json) on creating JSON objects. If that's not what you're trying to do then I would suggest you ask a new question. – Juffy Jun 25 '13 at 00:46
can we directly change map object to JSon object ? like Print_button is doing. And i have one more question do u know where is this Print_Button.Click() event is coded ? – Rahul Gupta Jun 25 '13 at 03:54
By 'ask a new question' I mean post a new question using the 'Ask Question' button in the top right, not ask more questions in this thread. – Juffy Jun 25 '13 at 05:35

Esri ArcGIS Print the map

1 Answers1