网上有不少示例就不再详细赘述了。
可以参考:
官方示例:https://developers.arcgis.com/javascript/3/jssamples/#printing
博主示例:https://www.cnblogs.com/giserhome/p/6972438.html
开发环境:ArcMap10.3,ArcGIS Server10.3,Java后台(proxy.jsp),API3.18
proxy文件下载地址:https://github.com/Esri/resource-proxy/releases,下载解压后能分别看到适用.NET、Java、PHP的文件。(有的博主说V1.0支持10.1,V1.1.0支持10.2和10.3,我下的1.0在Server10.3上也能用。。。)
首先启动本地Server提供的打印工具
登录ArcGIS Server站点,找到“服务”-“Utilities”文件夹下PrintingTools工具,这是Server自带的,一般是停止状态,点击启动。
启动后,与平常服务类似,进入REST URL,可以看到如下
点击获得本地打印地图的服务URL:
http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task
功能主要引用PrintTask,PrintTemplate,PrintParameters(Print的例子官网已经提供)
主要代码如下:
var printUrl ="http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
var printTask = new PrintTask(printUrl);
var layout = "A4 Landscape";
var label = "Landscape (PDF)";
var format = "gif";
var options = {
legendLayers: [],
scalebarUnit: "Miles",
titleText: "The map"
//authorText:"zyy ",
//copyrightText:"copyrightText"
};
var templates = new PrintTemplate();
templates.layout = layout;
templates.label = label;
templates.format = format;
templates.layoutOptions = options;
var params = new PrintParameters();
params.map = map;
params.template = templates;
printTask.execute(params, function(evt){
var printWindow = window.open();
printWindow.document.write(
"<html>"+
"<head><meta chartset='utf-8'></head>"+
"<body style='margin:0;width:100%;height:100%;'>"+
"<div id='printbtn' style='position:absolute;top:10px;left:60px;'>"+
"<input type='button' οnclick='wprint()' value='打印'/></div>"+
"<div>"+
"<img id='img1' src=''></div>"+
"<script>"+
"function wprint(){"+
"document.getElementById('printbtn').style.display='none';"+
"window.print();"+//连接打印机打印
"document.getElementById('printbtn').style.display='block';}\n"+
"document.getElementById('img1').οnlοad=function(e){e.stopPropagation();wprint();window.close();}\n"+
"document.getElementById('img1').src='"+evt.url+"';"+
"</script></body></html>");
printWindow.document.close();
printWindow.focus();
运行一下如果提示“ esri.config.defaults.io.proxyUrl 尚未进行设置。如果向启用了 CORS 的服务器发出请求,请将域推送到 esri.config.defaults.io.corsEnabledServers。”则需要设置代理。
出现该问题的原因可以参考:
http://blog.csdn.net/wpz0713/article/details/50245041
http://blog.csdn.net/qingyimengwu/article/details/42982057
个人理解是打印功能需要向Server发送请求,图形较复杂或较大同样需要传递的字符串较多,收到普通传输上限限制无法传递。
解决方法:
这里就用到了上面所说的proxy文件,在当前js代码中引用"esri/config"类,
在创建Map前先引用proxy.jsp文件,如下
esriConfig.defaults.io.proxyUrl = contextPath+"/map/proxy.jsp";
esriConfig.defaults.io.alwaysUseProxy = false;
这样就解决了,看上面的博客还得设置HashMap<String,String>、ServerUrl什么的,我也没设置,也可能凑巧能运行了。
之前看官网和博客的Demo,有用到官方提供的打印Url如下:
“https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task”
实际运行起来会出现如下错误:
如果出错就用本地的打印服务吧。
实际运行效果:
上图中底层的地图就是通常看到的Map,触发打印事件后,可以看到PrintTask.execute回调参数evt.url就是一张打印的效果图。
打断点查看:
由此我们可以推测,API向Server的PrintingTools服务发送请求,服务将处理结果即图片(文件格式参考PrintTemplate.format)。