I am trying to add "Clear or delete" button beside every print item and also one "Clear Prints" button at the end to clear all prints in Print widget 4.13 of below sample code, please help me.
Print widget | ArcGIS API for JavaScript 4.13
Imtiyaz,
Here is a sample for that:
<!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.13</title> <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } </style> <script src="https://js.arcgis.com/4.13/"></script> <script> require([ "esri/views/MapView", "esri/widgets/Print", "esri/WebMap" ], function(MapView, Print, WebMap) { 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 printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" }); // Add widget to the top right corner of the view view.ui.add(print, "top-right"); print.viewModel.watch('state', function(state){ if(state === 'ready'){ setTimeout(() => { var button = document.createElement('button'); button.setAttribute('ID', 'btnClearPrints'); button.innerText = 'Clear Prints...'; button.className = 'esri-button'; button.addEventListener('click', clearPrints); var pc = document.getElementsByClassName('esri-print__container')[0] pc.appendChild(button); }, 500); } }); function clearPrints(){ var prints = document.getElementsByClassName('esri-print__exported-file') while (prints.length > 0) prints[0].remove(); } }); }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> </body> </html><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thanks a lot.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.