Print Button Not Working In ArcGIS API for JavaScript

SarojThapa1 — Fri, 10 Dec 2021 21:28:15 GMT
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>
Re: Print Button Not Working In ArcGIS API for JavaScript

RobertScheitlin__GISP — Mon, 14 Nov 2016 20:41:15 GMT
Saroj,
You are creating your Print dijit and specifying the map property before you even create your map so the print dijit is getting constructed with a null map object. You will also likely need to specify a proxy.
Re: Print Button Not Working In ArcGIS API for JavaScript

SarojThapa1 — Mon, 14 Nov 2016 21:11:22 GMT
Thank you so much Robert. Calling Print dijit before the map was the issue.
topic Re: Print Button Not Working In ArcGIS API for JavaScript in ArcGIS JavaScript Maps SDK Questions

Print Button Not Working In ArcGIS API for JavaScript

Re: Print Button Not Working In ArcGIS API for JavaScript

Re: Print Button Not Working In ArcGIS API for JavaScript
