This issue came-up after resolving an IIS validation issue described here - ArcGIS JSAPI Print/Validation Issue: SyntaxError: Unexpected token <
It seems similar to an issue reported awhile back here - Print Task fails with default Selected Point Graphic
To replicate the issue, because a proxy is involved (and I wasn't able to hit the Esri proxy outside of an Esri domain), you'll have to use sandbox and manually paste code:
ArcGIS API for JavaScript Sandbox
1) Copy the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="description" content="[Print webmap]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the widget_print_webmap sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/3/widget_print_webmap/index.html
-->
<title>Print webmap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/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="https://js.arcgis.com/3.20/"></script>
<script>
var app = {};
require([
"esri/arcgis/utils", "esri/dijit/Print",
"esri/tasks/PrintTemplate", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser", "esri/dijit/Search",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
arcgisUtils, Print,
PrintTemplate, esriConfig,
arrayUtils, dom, parser, Search
) {
parser.parse();
app.webmapId = "523e292002294392a36d888a9780a731";
app.printUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%...";
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);
createSearch();
});
function createSearch(){
var search = new Search({
map: app.map
}, "search");
search.startup();
}
function createPrintDijit(printTitle) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
var layouts = [{
name: "Letter ANSI A Landscape",
label: "Landscape (PDF)",
format: "pdf",
options: {
legendLayers: [],
scalebarUnit: "Miles",
titleText: printTitle + ", Landscape PDF"
}
}, {
name: "Letter ANSI A Portrait",
label: "Portrait (Image)",
format: "jpg",
options: {
legendLayers: [],
scalebarUnit: "Miles",
titleText: printTitle + ", Portrait JPG"
}
}];
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();
}
});
</script>
</head>
<body class="tundra">
<div id="search"></div>
<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>
<div id="info">
The map is <a href="https://developers.arcgis.com/javascript/3/jsapi/esri.arcgis.utils-amd.html#createmap">created from an ArcGIS.com webmap</a> and
<a href="https://developers.arcgis.com/javascript/3/jsapi/printtemplate-amd.html">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>
2) Paste into the print widget sandbox example
3) Click "refresh" in the sandbox window
4) Print the page (PDF) without searching an address, which is successful
-> Notice the following URL is hit in Fiddler (non proxy) -https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export...
-> Here's the JSON sent:
{
"mapOptions" : {
"showAttribution" : true,
"extent" : {
"xmin" : -9602504.8309441,
"ymin" : 4580852.692386033,
"xmax" : -9471644.63851983,
"ymax" : 4637416.093317086,
"spatialReference" : {
"wkid" : 102100
}
},
"spatialReference" : {
"wkid" : 102100
},
"scale" : 577790.5542889973
},
"operationalLayers" : [{
"id" : "World_Ocean_Base_5811",
"title" : "World_Ocean_Base",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
}, {
"id" : "LOJIC_LandRecords_Louisville_4506",
"title" : "LOJIC_LandRecords_Louisville",
"opacity" : 0.28,
"minScale" : 0,
"maxScale" : 0,
"url" : "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...",
"visibleLayers" : [0, 2]
}, {
"id" : "World_Ocean_Reference_1604",
"title" : "World_Ocean_Reference",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer"
}
],
"exportOptions" : {
"outputSize" : [800, 1100],
"dpi" : 96
},
"layoutOptions" : {
"titleText" : "Louisville – Land Records, Landscape PDF",
"scaleBarOptions" : {
"metricUnit" : "esriKilometers",
"metricLabel" : "km",
"nonMetricUnit" : "esriMiles",
"nonMetricLabel" : "mi"
},
"legendOptions" : {
"operationalLayers" : []
}
}
}
5) Click "refresh" in the sandbox to reload
6) In the Search widget:
-> "Louisville, Kentucky, United States"
-> Search
7) Allow the geocode/plot process to complete (don't close anything)
😎 Print the page (PDF) after searching, which is not successful
-> Notice the following URL is hit in Fiddler (proxy) - https://developers.arcgis.com/proxy/?https://sampleserver6.arcgisonline.com/arcgis/rest/services/Uti...
-> Here's the JSON sent:
{
"mapOptions" : {
"showAttribution" : true,
"extent" : {
"xmin" : -9579408.788718093,
"ymin" : 4599781.962824823,
"xmax" : -9513978.692506071,
"ymax" : 4631044.707393419,
"spatialReference" : {
"wkid" : 102100
}
},
"spatialReference" : {
"wkid" : 102100
},
"scale" : 288895.27714399697
},
"operationalLayers" : [{
"id" : "World_Ocean_Base_5811",
"title" : "World_Ocean_Base",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
}, {
"id" : "LOJIC_LandRecords_Louisville_4506",
"title" : "LOJIC_LandRecords_Louisville",
"opacity" : 0.28,
"minScale" : 0,
"maxScale" : 0,
"url" : "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...",
"visibleLayers" : [0, 2]
}, {
"id" : "map_graphics",
"opacity" : 1,
"minScale" : 0,
"maxScale" : 0,
"featureCollection" : {
"layers" : [{
"layerDefinition" : {
"name" : "pointLayer",
"geometryType" : "esriGeometryPoint"
},
"featureSet" : {
"geometryType" : "esriGeometryPoint",
"features" : [{
"geometry" : {
"x" : -9546693.6798316,
"y" : 4615403.733083267,
"spatialReference" : {
"wkid" : 102100
}
},
"symbol" : {
"color" : [0, 0, 0, 0],
"size" : 12,
"angle" : 0,
"xoffset" : 6.75,
"yoffset" : 13.5,
"type" : "esriSMS",
"outline" : {
"color" : [0, 255, 255, 255],
"width" : 1.5,
"type" : "esriSLS",
"style" : "esriSLSSolid"
}
}
}, {
"geometry" : {
"x" : -9546693.6798316,
"y" : 4615403.733083267,
"spatialReference" : {
"wkid" : 102100
}
},
"attributes" : {
"Addr_type" : "POI",
"Match_addr" : "Louisville, Kentucky, United States",
"StAddr" : "",
"City" : "",
"score" : 100,
"searchTheme" : "arcgisSearch",
"searchResult" : "Louisville, Kentucky, United States",
"searchMoreResults" : "moreResults",
"searchMoreResultsItem" : "moreItem",
"searchMoreResultsId" : "search_more_results",
"searchMoreResultsHtml" : ""
},
"symbol" : {
"angle" : 0,
"xoffset" : 6.75,
"yoffset" : 13.5,
"type" : "esriPMS",
"url" : "https://js.arcgis.com/3.20/esri/dijit/Search/images/search-pointer.png",
"width" : 27,
"height" : 27
},
"infoTemplate" : {
"title" : "Search result",
"content" : "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">${searchResult}</div><div>${searchMoreResultsHtml}</div></div></div>"
}
}
]
}
}
]
}
}, {
"id" : "World_Ocean_Reference_1604",
"title" : "World_Ocean_Reference",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer"
}
],
"exportOptions" : {
"outputSize" : [800, 1100],
"dpi" : 96
},
"layoutOptions" : {
"titleText" : "Louisville – Land Records, Landscape PDF",
"scaleBarOptions" : {
"metricUnit" : "esriKilometers",
"metricLabel" : "km",
"nonMetricUnit" : "esriMiles",
"nonMetricLabel" : "mi"
},
"legendOptions" : {
"operationalLayers" : []
}
}
}
-> Notice the error in console (print does not complete):
-> Error: Unable to complete operation.
-> This will probably manifest on the server as an error like this:
9) Now, close the infoWindow only
10) Print the page (PDF), which should complete successfully (it does not hit the proxy)
-> Here's the URL hit (again, notice no proxy this time) - https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%...
-> Here's the JSON sent:
{
"mapOptions" : {
"showAttribution" : true,
"extent" : {
"xmin" : -9579408.788718093,
"ymin" : 4599781.962824823,
"xmax" : -9513978.692506071,
"ymax" : 4631044.707393419,
"spatialReference" : {
"wkid" : 102100
}
},
"spatialReference" : {
"wkid" : 102100
},
"scale" : 288895.27714399697
},
"operationalLayers" : [{
"id" : "World_Ocean_Base_5811",
"title" : "World_Ocean_Base",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
}, {
"id" : "LOJIC_LandRecords_Louisville_4506",
"title" : "LOJIC_LandRecords_Louisville",
"opacity" : 0.28,
"minScale" : 0,
"maxScale" : 0,
"url" : "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/...",
"visibleLayers" : [0, 2]
}, {
"id" : "map_graphics",
"opacity" : 1,
"minScale" : 0,
"maxScale" : 0,
"featureCollection" : {
"layers" : [{
"layerDefinition" : {
"name" : "pointLayer",
"geometryType" : "esriGeometryPoint"
},
"featureSet" : {
"geometryType" : "esriGeometryPoint",
"features" : [{
"geometry" : {
"x" : -9546693.6798316,
"y" : 4615403.733083267,
"spatialReference" : {
"wkid" : 102100
}
},
"attributes" : {
"Addr_type" : "POI",
"Match_addr" : "Louisville, Kentucky, United States",
"StAddr" : "",
"City" : "",
"score" : 100,
"searchTheme" : "arcgisSearch",
"searchResult" : "Louisville, Kentucky, United States",
"searchMoreResults" : "moreResults",
"searchMoreResultsItem" : "moreItem",
"searchMoreResultsId" : "search_more_results",
"searchMoreResultsHtml" : ""
},
"symbol" : {
"angle" : 0,
"xoffset" : 6.75,
"yoffset" : 13.5,
"type" : "esriPMS",
"url" : "https://js.arcgis.com/3.20/esri/dijit/Search/images/search-pointer.png",
"width" : 27,
"height" : 27
},
"infoTemplate" : {
"title" : "Search result",
"content" : "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">${searchResult}</div><div>${searchMoreResultsHtml}</div></div></div>"
}
}
]
}
}
]
}
}, {
"id" : "World_Ocean_Reference_1604",
"title" : "World_Ocean_Reference",
"opacity" : 1,
"minScale" : 591657527.591555,
"maxScale" : 9027.977411,
"url" : "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer"
}
],
"exportOptions" : {
"outputSize" : [800, 1100],
"dpi" : 96
},
"layoutOptions" : {
"titleText" : "Louisville – Land Records, Landscape PDF",
"scaleBarOptions" : {
"metricUnit" : "esriKilometers",
"metricLabel" : "km",
"nonMetricUnit" : "esriMiles",
"nonMetricLabel" : "mi"
},
"legendOptions" : {
"operationalLayers" : []
}
}
}
-> Here's a BC difference between the last two requests:
This looks like a genuine bug to me! Any ideas?
Thanks!