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>
