AnsweredAssumed Answered

Print Task examples?

Question asked by dmarquardt on Dec 26, 2013
Latest reply on Jan 17, 2014 by odoe
Hello, 

There don't seem to be too many examples of how to use the Print Task on the ESRI site.  I'm curious to see what others have done.

Below is one I cobbled together based on some online resources (https://github.com/slead/jsapi/blob/master/printTask/printTask.html) . The script below has a drop down list that opens up a new window with the print result (not the most elegant, but does the job).  I'm curious, though, to see what PrintTask is capable.  Seems like the possibilities should be endless.

What have others done? What options have you been able to give the end user in designing the print result?  Have you been able to avoid the popup blocker (pretty inherent in the example I give)? 

Either sample scripts, or links to scripts that use print task would be appreciated.  Just trying to see what is possible. 


David

[HTML]<!doctype html>
<html>
<head>
  
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=9" >
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>Print Task Test</title>
  <script>
    var dojoConfig = {
   async : true
    };
  </script>
  <link rel="Stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css" />
  <link rel = "stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />
  <script src="http://js.arcgis.com/3.7/" type="text/javascript"></script>
  <style>
    html, body, #window, #map {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     font-family:arial, helvetica, sans-serif;
    }

   #buttons{
    position: absolute;
    top:  10px;
    right: 18px;
    height: 20px;
    z-index:100;
    box-shadow: none;
    font-size:13px;
   }
  </style>

</head>
<body class="tundra">
  <div id="window">
     <div id="map"  ></div>   

     <div id="buttons">
    <button id="prnt" class="topButton" data-dojo-type="dijit/form/DropDownButton" ><span>Print</span>
     <div  dojoType="dijit/Menu">
      <div  id="png" data-dojo-type="dijit/MenuItem" label="Image(.png)" style='font-size: 13px;'></div>
      <div  id="landscape" data-dojo-type="dijit/MenuItem" label="Landscape(PDF)" style='font-size: 13px;'></div>
      <div id="portrait" data-dojo-type="dijit/MenuItem" label="Portrait(PDF)" style='font-size: 13px;'></div>
     </div>
    </button>
     </div> 
  </div>     
</body>
<script>
  var map;  
  var PrintTask;
  //var layerResults;

  require ([
   "dojo/on",
   "dojo/_base/connect",
   "dojo/dom",
   "dojo/query",
   "dojo/parser",
   "esri/map",
    "esri/dijit/Scalebar",
   "esri/arcgis/utils",
   "esri/dijit/Print",
   "esri/tasks/PrintTask",
   "esri/tasks/PrintTemplate", 
   "esri/dijit/Popup",
    "esri/dijit/Attribution",    
   "dojo/dom-construct",
   "dojo/dom-class",
   "dojo/mouse",
   "dijit/form/Button",
   "dijit/Menu",
   "dijit/layout/BorderContainer",
   "dojo/domReady!"
   ],
   function (on, connect, dom, query, parser, Map, Scalebar, arcgisUtils, Print, PrintTask,
   PrintTemplate, Popup, esriConfig, Attribution,
   domConstruct, domClass, mouse, Button, Menu, BorderContainer){
    parser.parse();
    var ext = new esri.geometry.Extent({ "xmin": -17529487, "ymin": 1874364, "xmax": -5084316, "ymax": 7500129, "spatialReference": { "wkid": 102100} });
    map = new esri.Map("map", {  
       extent: ext,
       showAttribution: false,
     });
    var tiled = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
    map.addLayer(tiled);
    // connect the dropdown list with options for the print template
    on(dom.byId("png"),'click', function () {
     printTaskSetup("MAP_ONLY", "png32");
    })   
    on(dom.byId("landscape"),'click', function () {
     printTaskSetup("A4 Landscape", "PDF");
    })
    on(dom.byId("portrait"),'click', function () {
     printTaskSetup("A4 Portrait", "PDF");
    })
    // create print task
    function printTaskSetup(layout, format){
     var template = new esri.tasks.PrintTemplate();
     template.format = format;
     template.layout = layout;
     template.layoutOptions = {
       "scalebarUnit": "Miles",
       "copyrightText": "",
       "showAttribution": false
     }
     template.preserveScale = true;
     var params = new esri.tasks.PrintParameters();
     params.map = map;
     params.template = template;
     printTask = new esri.tasks.PrintTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
     printTask.execute(params, printResult);
    }
    function printResult(result) {
      window.open(result.url, "_blank")
    }
    function printError(error) {
      alert(error);
    }
   }
  );
</script>
</html>[/HTML]

Outcomes