Print Task examples?

DavidMarquardt · ‎12-26-2013

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%2...");
     printTask.execute(params, printResult);
    }
    function printResult(result) {
      window.open(result.url, "_blank")
    }
    function printError(error) {
      alert(error);
    }
   }
);
</script>
</html>[/HTML]

ReneRubalcava · ‎01-09-2014

I have standard print widget I use for all my apps.
https://github.com/odoe/esri-print-widget

It's meant to display a button you click and a print dialog shows up with dropdown menu for available templates.

It's used in this sample starter-kit here.
https://github.com/odoe/esri-js-starterkit

View solution in original post

Anonymous User · ‎12-30-2013

Hi, David. Take a look at the link below. Print Task was used for the tool farthest to the upper right. You're welcome to use whatever you need.

http://gisapps.fortsmithar.gov/javascript/ParcelMap.html

GaneshSolai_Sambandam · ‎12-31-2013

[HTML]<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <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">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; padding: 0 0 5px 0; text-align: center; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        border: 2px solid #666;
        border-radius: 5px;
        bottom: 20px;
        color: #666;
        font-family: arial;
        height: auto;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 300px;
        z-index: 40;
      }
      #feedback a {
        border-bottom: 1px solid #888;
        color: #666;
        text-decoration: none;
      }
      #feedback a:hover, #feedback a:active, #feedback a:visited {
        border: none;
        color: #666;
        text-decoration: none;
      }
      #note { padding: 0 0 10px 0; }
      #info { padding: 10px 0 0 0; }
    </style>

    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var app = {};
      require([
        "esri/arcgis/utils", "esri/dijit/Print",
        "esri/tasks/PrintTemplate", "esri/config",
        "dojo/_base/array", "dojo/dom", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        arcgisUtils, Print,
        PrintTemplate, esriConfig,
        arrayUtils, dom, parser
      ) {
        parser.parse();

        app.webmapId = "8315cf7d20f0484e869c4791f70f4f15";
        app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...";

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

        var webmap = arcgisUtils.createMap(app.webmapId, "map", {
          mapOptions: {
            center: [-85.673, 38.21],
            zoom: 10
          }
        });
        webmap.then(function(resp) {
          app.mapInfo = resp.itemInfo.item;
          app.map = resp.map;
          createPrintDijit(app.mapInfo.title);
          createPrint(dojo.byId('map_name').value);
        });

        function createPrint(printTitle) {
                var layoutTemplate, templateNames, mapOnlyIndex, templates;

                // create an array of objects that will be used to create print templates
                var layouts = [
      {
          "name": "Letter ANSI A Landscape",
          "label": "Landscape (PDF)",
          "format": "pdf",
          "options": {
              "legendLayers": [], // empty array means no legend
              "scalebarUnit": "Miles",
              "titleText": printTitle + ", Landscape PDF"
          }
      }, {
          "name": "Letter ANSI A Portrait",
          "label": "Portrait (Image)",
          "format": "jpg",
          "options": {
              "legendLayers": [],
              "scaleBarUnit": "Miles",
              "titleText": printTitle + ", Portrait JPG"
          }
      }, {
          label: "Map Only (PNG)",
          format: "PNG32",
          layout: "MAP_ONLY",
          preserveScale: false,
          exportOptions: {
              width: 1024,
              height: 768,
              dpi: 96
          }
      }
    ];

                // create the print templates, could also use dojo.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);
                });

                printer = new esri.dijit.Print({
                    "map": app.map,
                    "templates": templates,
                    "asynch": false,
                    url: "http://argis.ualr.edu/ieagis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Tas..."
                }, dojo.byId("printButton"));
                printer.startup();

                dojo.connect(printer, "onPrintStart", function () {
                    this.templates[0].layoutOptions.titleText = dojo.byId("map_name").value;
                });
            }

        function createPrintDijit(printTitle) {
          var layoutTemplate, templateNames, mapOnlyIndex, templates;

          // create an array of objects that will be used to create print templates
          var layouts = [{
            name: "Letter ANSI A Landscape",
            label: "Landscape (PDF)",
            format: "pdf",
            options: {
              legendLayers: [], // empty array means no legend
              scalebarUnit: "Miles",
              titleText: printTitle + ", Landscape PDF"
            }
          }, {
            name: "Letter ANSI A Portrait",
            label: "Portrait (Image)",
            format: "jpg",
            options: {
              legendLayers: [],
              scaleBarUnit: "Miles",
              titleText: printTitle + ", Portrait JPG"
            }
          }];

          // create the print templates
          var templates = arrayUtils.map(layouts, function(lo) {
            var t = new PrintTemplate();
            t.layout = lo.name;
            t.label = lo.label;
            t.format = lo.format;
            t.layoutOptions = lo.options;
            return t;
          });

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

        function handleError(err) {
          console.log("Unable to get webmap from ArcGIS.com: ", err);
        }
      });
    </script>
</head>

<body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">

        <div id="feedback">
          <h3>
            ArcGIS.com Webmap and the Print Dijit
          </h3>
          <div id="info">
            <div id="note">
              Note: This sample uses an ArcGIS Server version 10.1 export web map task.
            </div>

            
            <div id="print_button"></div>

            Map Title: <textarea rows=5 cols=30 id="map_name" name="map_name">AECAM</textarea><br /><br/>
      <span id="printButton"></span>

            <div id="info">
              The map is created from an <a href="http://help.arcgis.com/en/arcgisonline/help/#/Overview/010q00000042000000/">ArcGIS.com webmap</a> and
              <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/printtemplate.htm">print templates</a> are
              created manually. Refer to the documentation for more print template options (output formats, additional layouts, etc.).
            </div>

          </div>
        </div>
      </div>
    </div>
</body>
</html>
[/HTML]

DavidMarquardt · ‎01-09-2014

Russell,

Thanks! I like the way you incorporate a user defined map title into the print result. I'll plan on incorporating that, thank you. Have you seen examples that use PrintTask, rather than Print dijit? I'm curious to see how others have used this tool.

David

DavidMarquardt · ‎01-09-2014

Ganesh,

Thanks for the help! Have you done any work with PrintTask, instead of Print dijit?

David

ReneRubalcava · ‎01-09-2014

I have standard print widget I use for all my apps.
https://github.com/odoe/esri-print-widget

It's meant to display a button you click and a print dialog shows up with dropdown menu for available templates.

It's used in this sample starter-kit here.
https://github.com/odoe/esri-js-starterkit

DavidMarquardt · ‎01-10-2014

Thanks!

this is really helpful.

David

ZhujingXia · ‎01-17-2014

Hi,

I download the packages for both Print_Widget_Master and the JS_Satert_Kit.
But when I try trun both application on my machine, they all got blank page.
Could some one let me know that how to use the code packages.
Thanks
Zhujing

ReneRubalcava · ‎01-17-2014

I updated the README with some instructions and requirements for use.
https://github.com/odoe/esri-js-starterkit/blob/master/README.md

It requires having git, node, Grunt and bower installed.
http://git-scm.com/
http://nodejs.org/
http://gruntjs.com/
http://bower.io/