How to use a click button to print map which is already created

[RyanYang]

I just got a task to add a print button to web page. Once user clicks this button, the map should be printed. Since the project is already there, I don't want make too much change to it. Thanks in advance.

[OwenEarley]

If you are using the ESRI JS API then check out the PrintTask. There are also a few PrintTask samples available - Samples | ArcGIS API for JavaScript.

[RyanYang]

Owen. Thank you very much. Since I'm new to esri and dojo. I don't know how to implement these samples in my project. Actually my project already created the map in a init() function such as dojo.addOnLoad(init). Now I just want to add one onclick function to the page. Can I do like this? function printMap(){   var url='hhttp://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...   var printTask = new esri.tasks.PrintTask(url);   var params = new esri.tasks.PrintParameters();   params.map = map;   printTask.execute(params, printResult); }

[ChrisSergent]

Here is our custom print task that is done using our own web services: Print a Map

Click on the hammer to bring up the print button and then click on the print button for the custom print dialog box.

Here is the source code: JS Bin - Collaborative JavaScript Debugging  You will need to create your own images for your buttons or you can copy ours.

[RyanYang]

Hi Chris,

Thanks for your reply. It's very helpful. Following your code, I have changed my code as follows.

function printMap(){

        document.getElementById("printMap").innerHTML = "Printing...";

        document.getElementById("printMap").disabled = true;

    esriConfig.defaults.io.proxyUrl = "proxy.ashx";

    esri.config.defaults.io.alwaysUseProxy = false;

    var url ='http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...

  var printTask = new esri.tasks.PrintTask(url);

  var params = new esri.tasks.PrintParameters();

  params.map = map;

  printTask.execute(params, function (evt) {

            document.getElementById("printMap").style.display = 'none';

            document.getElementById("printResult").href = evt.url;

            document.getElementById("printResult").style.display = 'block';

            dojo.on(dojo.dom.byId("printResult"), "click", function () {

                document.getElementById("printMap").innerHTML = "Print Map";

                document.getElementById("printMap").style.display = 'block';

                document.getElementById("printMap").disabled = false;

                document.getElementById("printResult").style.display = 'none';

            });

        }, function (evt) {

            document.getElementById("printMap").disabled = false;

            document.getElementById("printMap").innerHTML = "Print Map";

        });

  }

Once I click the printMap button, this function will be called. Once I click the get Printout button, a new page shows up. However I cannot see the map on the new page.

By the way, I define my map as a global variable. The map is created by dojo.addOnLoad(init). So I can see the map on the original page. But cannot see it on the new page.

Thanks again.

[ChrisSergent]

Do you have a public site or can you post all of your page code on js Bin?

[RyanYang]

The source code is very long, and most are irrelevant. To generate the map, we have to make a call to our local server service, so we cannot test the code on any public site. Anyway, the map is created by calling init() function.

Since I'm new to esri and dojo. I have a silly question. To print the map, do we have to set the print template?

[ChrisSergent]

I am an ongoing learner to custom code, but I don't see a return statement for your print task. I found the custom print task a little tricky, but I thought the template was required so I did include it. If your project is not too in depth, you may want to consider converting it to AMD as that is the only version of dojo that the Esri JS API 4.0 will support.

Are you familiar with how to use browser debugging tools? If so, are you receiving any errors?

[RyanYang]

I use chrome debug tools, and didn't get any error except one warning.

Resource interpreted as Script but transferred with MIME type text/plain: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Printi…mplate=MAP_ONLY&callback...".

what kind problem will this warning lead to?

Thanks

[ChrisSergent]

For the warning, it means that the server is sending that type of response: Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?...

Depending on what kind of server that you are using, you can add it in whatever you use to configure servers. I don't know if that is causing any issues.