<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>地图打印</title> <link rel="stylesheet" href="https://localhost/arcgis_js_api/library/4.6/esri/css/main.css"> <script src="https://localhost/arcgis_js_api/library/4.6/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #button{ position: fixed; top: 10px; right: 30px; border-radius: 4px; } </style> <script> require([ "esri/layers/MapImageLayer", "esri/Map", "esri/views/MapView", "esri/config", "esri/tasks/PrintTask", "esri/tasks/support/PrintTemplate", "esri/tasks/support/PrintParameters", "dojo/dom", "dojo/domReady!" ], function(MapImageLayer, Map, MapView, esriConfig, PrintTask, PrintTemplate, PrintParameters, dom){ var lyr = new MapImageLayer("https://sms.esrichina.com/server/rest/services/feature/point/MapServer"); //该服务要共享everyone var mymap = new Map( { //basemap: "osm", layers: [lyr], }); var view = new MapView({ map: mymap, container: "viewDiv", zoom: 6, center: [116.402544,39.915378] }); var button = dom.byId("button"); button.onclick = function(){ var printTask = new PrintTask({ url:"https://sms.esrichina.com:6443/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" }); var template = new PrintTemplate({ exportOptions: { dpi: 96 }, format: "pdf", layout: "a3-landscape", layoutOptions: { titleText: "The MAP", authorText: "shaoms"
copyrightText: "My Company",
scalebarUnit: "Miles",
// the following text elements must
// exist in the print service to appear
customTextElements: [
{ "自定义元素": "My description" }
]
}, preserveScale: false }); var params = new PrintParameters({ view: view, template: template }); printTask.execute(params).then(result, errorResult); function result(evt){ console.log(evt); window.open(evt.url,"_blank"); //在新的标签页打开打印连接 } function errorResult(err){ console.log(err); } } }); </script> </head> <body> <div id="viewDiv"></div> <button id="button" title="打印">打印</button> </body> </html>