AnsweredAssumed Answered

Print Button Not Working In ArcGIS API for JavaScript

Question asked by sarojthapa60 on Nov 14, 2016
Latest reply on Nov 14, 2016 by sarojthapa60

The Print button is not producing the "Printout" link. I am using arcgis api for javascript 3.18. When I select a dropdown and click print, it keeps saying "Printing" but nothing happens after that. I could not figure out what is possibly wrong with my codes. Thanks

 

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
            padding-bottom: 0;
            margin-bottom: 0;
            margin-left: 0;
            padding-left: 0;
        }

        #map {
            padding-top: 8px;
            width: 100%;
            height: 100%;
            padding-bottom: 20px;
            margin-left: 0;
            padding-left: 0;
        }


        #rightPane {
            width: 8%;
            padding-bottom: 20px;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }

        .claro .dijitTooltipContainer {
            background-image: none;
            border:           1px solid #444444;
            background-color: #444444;
            color:            #FFFFFF;
        }

        .claro .dijitTooltipConnector {
            background-image: none;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map;

        require([
                    "esri/map",
                    "esri/layers/FeatureLayer",
                    "esri/InfoTemplate",
                    "esri/dijit/BasemapGallery",
                    "esri/dijit/Legend",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/layers/ImageParameters",
                    "esri/Color",
                    "esri/dijit/Popup",
                    "esri/dijit/PopupTemplate",
                    "esri/dijit/Print",
                    "esri/tasks/PrintTemplate",

                    "esri/symbols/SimpleFillSymbol",
                    "esri/symbols/SimpleLineSymbol",

                    "dojo/on",
                    "dojo/dom",
                    "dojo/parser",
                    "dojo/dom-construct",

                    "dijit/registry",
                    "dijit/Toolbar",
                    "dijit/form/Button",
                    "dijit/TitlePane",
                    "dijit/layout/ContentPane",
                    "dijit/layout/AccordionContainer",
                    "dijit/layout/BorderContainer",
                    "dojo/domReady!"
                ],
                function (Map, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
                          ImageParametrs, Color, Popup, PopupTemplate, Print, PrintTemplate, SimpleFillSymbol, SimpleLineSymbol,
                          on, dom, parser, domConstruct, registry) {

                    parser.parse();

                    // Create an array of JSON objects that will be used to create print templates
                    var myLayouts = [{
                        name: "Area Half Page",
                        label: "Half Page",
                        format: "PDF"
                    },
                        {
                            name: "Area Letter",
                            label: "Letter",
                            format: "JPG"
                        },
                        {
                            name: "Area Tabloid",
                            label: "Area Tabloid",
                            format: "JPG"
                        },
                        {
                            name: "MAP_ONLY",
                            label: "Map Only",
                            format: "JPG"
                        }];

                    // Create the print Templates
                    var myTemplates = [];
                    dojo.forEach(myLayouts, function (lo){
                        var t = new PrintTemplate();
                        t.layout = lo.name;
                        t.label = lo.label;
                        t.format = lo.format;
                        t.layoutOptions = lo.options;
                        myTemplates.push(t);

                    });

                    //Add a Print Widget that uses the prepared templates
                    var widgetPrint = new Print({
                        map: map,
                        url: "ExportUrl/GPServer/Export%20Web%20Map",
                        templates: myTemplates
                    }, divPrint);
                    widgetPrint.startup();

                    // var navToolbar;
                    var legendLayers = [];

                    var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
                    var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

                    var popupOptions = {
                        fillSymbol: sfs,
                        marginLeft: "70",
                        marginTop: "100"
                    };
                    //create a popup to replace the map's info window
                    var popup = new Popup(popupOptions, domConstruct.create("div"));


                    map = new Map("map", {
                        basemap: "topo",
                        center: [-88.55, 43.12],
                        zoom: 9,
                        infoWindow: popup
                    });

                    var popupTemplate = new PopupTemplate({
                        "title": "Location",
                        "description": "<b>Name: </b> {Name} </br><br/> <b>Code: </b> {Code}"
                    });

                    var popupTemplate2 = new PopupTemplate({
                        title: "Area",                        description: "Region: {Region}"
                    });

                    var featureLayer = new FeatureLayer("RESTUrl/FeatureServer0", {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        infoTemplate: popupTemplate,
                        opacity:1,
                        outFields: ["*"]
                    });

                    var featureLayer2 = new FeatureLayer("RESTUrl/FeatureServer/5",{
                        mode: FeatureLayer.MODE_ONDEMAND,
                        opacity:0.2,
                        outFields: ["*"],
                        infoTemplate: popupTemplate2
                    });

                    //map.addLayers([dynamicLayer]);
                    map.addLayer(featureLayer2);
                    map.addLayer(featureLayer);


                    var basemapGallery = new BasemapGallery({
                        showArcGISBasemaps: true,
                        map: map
                    }, "basemapGallery");
                    basemapGallery.startup();

                    basemapGallery.on("error", function (msg) {
                        console.log("basemap gallery error: ", msg);
                    });

                    var imageParameters = new ImageParametrs();
                    imageParameters.format = "jpeg";

                    var dynamicLayer = new ArcGISDynamicMapServiceLayer("RESTUrl/MapServer", {
                        id: 'Area',
                        "imageParameters": imageParameters
                    });

                    map.on('layers-add-result', function () {
                        var legend = new Legend({
                            map: map,
                            layerInfos: legendLayers
                        }, "legendDiv");
                        legend.startup();
                    });
                    legendLayers.push({ layer: dynamicLayer, title: "Area" });
                    map.addLayers([dynamicLayer]);
                });
    </script>
</head>

<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

    <div id="rightPane"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'right'">

        <div id="divPrint"></div>

        <div data-dojo-type="dijit/layout/AccordionContainer">
            <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                 data-dojo-props="title:'Legend', selected:true">

                <div id="legendDiv"></div>

            </div>

            <span>Loading...</span>

        </div>

    </div>

    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="overflow:hidden;">
    </div>

</div>

<div style="position:absolute; right:500px; top:53px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane"
         data-dojo-props="title:'Switch Basemap', closable:false, open:false">
        <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
        </div>
    </div>
</div>

</body>
</html>

Outcomes