Having not seen your application, I don't know if this will work for you but here's what I have done for one of my applications to add a "print map" functionality. I decided to create a print template built on HTML elements and then add the JPEG result of the PrintTask once it completes. Here's a screen shot of the simple map template of HTML elements:
And then once the PrintTask is completed, the resulting JPEG is inserted into a particular DIV element on the page for the final map:
Granted, you'll spend some quality time up front coming up with the HTML template but the rest of the code isn't much. You'll notice some extra code that selectively turns on/off legend elements based on what the user currently has visible when they clicked my print map button:
var html;
define ([
"dojo/_base/declare",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/tasks/PrintTask"
], function (
declare, PrintTemplate, PrintParameters, PrintTask
) {
return declare(null,{
returnPrintMapTemplate: function() {
html ='your HTML template goes here';
return html;
},
createPrintedMap: function(userTitle) {
//The new browser window must be opened in the function called by the 'onClick' event so
//the new window is created here and its associated variable is created with a global scope.
//Calculate the center of the screen for placement of the new window
var center_left = (screen.width / 2) - (1100 / 2);
var center_top = (screen.height / 2) - (600 / 2);
newWindow = window.open('mapPrint.html','mywindow','width=1100,height=600,menubar=yes,scrollbars=yes,left=' + center_left + ',top=' + center_top);
//Create the string based version of the HTML page template
var bodyContent = this.returnPrintMapTemplate();
//Open the new window and obtain a reference to it's DOM
theDocument = newWindow.document;
//Swap out the empty DOM of the browser for a string based version of the HTML template
theDocument.open("text/html","replace");
theDocument.write(bodyContent);
theDocument.close();
//Now begin editing/adding page elements as needed
if (userTitle.length > 0) {
theDocument.getElementById("prjName").innerHTML = userTitle;
} else {
theDocument.getElementById("prjName").innerHTML = "Project Vicinity";
}
censusOn = false;
if (document.getElementById("raceTractBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Minority Population Data:";
theDocument.getElementById("prjLimits").innerHTML = "Minority Population by Census Tract";
censusOn = true;
}
if (document.getElementById("raceBlockBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Minority Population Data:";
theDocument.getElementById("prjLimits").innerHTML = "Minority Population by Block Group";
censusOn = true;
}
if (document.getElementById("incomeTractBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Low Income Data:";
theDocument.getElementById("prjLimits").innerHTML = "Low Income Population by Census Tract";
censusOn = true;
}
if (document.getElementById("incomeBlockBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Low Income Data:";
theDocument.getElementById("prjLimits").innerHTML = "Low Income Population by Block Group";
censusOn = true;
}
if (document.getElementById("lepTractBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Limited English Proficiency Data:";
theDocument.getElementById("prjLimits").innerHTML = "Limited English Proficiency by Census Tract";
censusOn = true;
}
if (document.getElementById("lepBlockBtn").checked) {
theDocument.getElementById("censusThemeName").innerHTML = "Limited English Proficiency Data:";
theDocument.getElementById("prjLimits").innerHTML = "Limited English Proficiency by Block Group";
censusOn = true;
}
if (!censusOn) {
theDocument.getElementById("censusDataLegend").style.display = "none";
theDocument.getElementById("prjLimits").innerHTML = "Project Vicinity";
if (document.getElementById("tractBtn").checked) {
theDocument.getElementById("prjLimits").innerHTML = "Census Tract Boundaries";
}
if (document.getElementById("bgBtn").checked) {
theDocument.getElementById("prjLimits").innerHTML = "Block Group Boundaries";
}
} else {
theDocument.getElementById("censusDataLegend").style.display = "inline";
}
if ((!document.getElementById("tractBtn").checked) || (!document.getElementById("bgBtn").checked)) {
theDocument.getElementById("censusBoundaryLegend").style.display = "none";
}
pTemplate = new PrintTemplate();
pTemplate.exportOptions = {
width: 638,
height: 609,
dpi: 96
};
pTemplate.format = "jpg";
pTemplate.layout = "MAP_ONLY";
pTemplate.preserveScale = false;
pTemplate.showAttribution = false;
var params = new PrintParameters();
params.map = app.map;
params.template = pTemplate;
jpgMapDiv = theDocument.getElementById("mapAreaBlock");
pPrintTask = new PrintTask(url);
pPrintTask.execute(params, function(result) {
jpgMapDiv.innerHTML = "<img src=\"" + result.url + "\" \>";
newWindow.alert('Your map is ready!\n\nIn order to print this map properly, please use the following recommended settings under Print Setup:\n\n\u2022 Landscape orientation\n\u2022 0.25" margins\n\u2022 "Print Background Colors and Images" is checked');
});
},
getMapTitle: function() {
$("#freeow").empty();
theModalDlg = document.getElementById("mapTitleDialog");
theContent = theModalDlg.innerHTML;
theDialogTitle = 'Please provide a map title <span style="font-style:italic">(30 characters Max):</span>';
$("#freeow").freeow(theDialogTitle, theContent, {
classes: ["smokey"],
autoHide: false,
autoHideDelay: 5000
}).show();
},
adjustCharLeftLabel: function() {
theTitleTextbox = document.getElementById("txtMapTitle");
curTitle = theTitleTextbox.value;
charsLeft = 30 - curTitle.length;
if (charsLeft < 10) {
document.getElementById("lblCharsLeft").style.color = "red";
} else {
document.getElementById("lblCharsLeft").style.color = "white";
}
document.getElementById("lblCharsLeft").innerHTML = charsLeft + " characters remaining";
},
screenMapTitle: function() {
theTitleTextbox = document.getElementById("txtMapTitle");
curTitle = theTitleTextbox.value;
if (curTitle.length > 30) {
$("#freeow").freeow("Whoops!", 'Your map title is more than 30 characters in length. Please revise and try again.', {
classes: ["simple"],
autoHide: true,
autoHideDelay: 5000
}).show();
} else {
$("#freeow").empty();
app.pf.createPrintedMap(curTitle);
}
}
});
});
Steve