Any examples of Print widget with Print Task?

879
1
02-22-2019 12:21 PM
XavierLinus
New Contributor

Hello All,

I am new to coding in general and trying to get print task to work with the print widget button. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Print widget - 4.10</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/views/MapView",
"esri/widgets/Print",
"esri/WebMap",
"esri/tasks/PrintTask",
"esri/tasks/support/PrintTemplate",
"esri/tasks/support/PrintParameters"
],
function(
MapView, Print, WebMap, PrintTask, PrintTemplate, PrintParameters
) {

var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "d6d830a7184f4971b8a2f42cd774d9a7"
}
});

var view = new MapView({
container: "viewDiv",
map: webmap
});







view.when(function(){
var print = new Print({
view: view,
// specify your own print service
});

var printTask = new PrintTask({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
});
view.ui.add(print, "top-right");
var template = new PrintTemplate({
format: "jpg",
exportOptions: {
dpi: 300
},
layout: "a4-landscape",
layoutOptions: {
titleText: "Test",
authorText: "Carson",
forceFeatureAttributes: true,
showLabels: true,
Preservescale: true,
}
});

var params = new PrintParameters({
view: view,
template: template
});
const printResult = result => window.open(result.url, "_blank")
const printError = error => console.log(error)
printTask.execute(params).then(printResult, printError);

});

});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>

Im unsure how to "combine" the two. Thank you.

0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Emeritus

Xavier,

   The print widget is a wrapper that handles the PrintTask and PrintTemplates for you. You would never combine the two in an app it is one or the other. Why are you thinking that you need to combine them?