ArcGIS JavaScript API 4.11 - 打印导致 asp.net 中的回发问题

Question

我是 ESRI 和 javascript API 的新手。我正在尝试执行打印任务，如下所示：https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Print.html

我正在使用以下代码创建打印功能，它正确显示，如图所示：

require(["esri/widgets/Print"], function (Print) {
  var print = new Print({
    view: view,
    printServiceUrl: "https://printserviceurl/services/PrintService/GPServer/Export%20Web%20Map"
  });

    // Adds widget below other elements in the top left corner of the view
    view.ui.add(print, {
      position: "bottom-left"
    });
});

我遇到的问题是单击 "Advanced Options"、"Export" 或某些其他功能导致回发。这是一个 asp.net 网络应用程序，地图位于 asp.net 母版页表单控件中。这导致整个页面回发。有没有人建议防止整页回发并保留打印功能？如果我将它移到标签之外，它确实可以正常工作，但要将它正确定位在页面中，内容区域必须保持在表单内。

Answer 1

我最终找到了解决方案。我使用以下代码创建打印功能并插入到 asp.net 表单标签之外的 div。

require(["esri/widgets/Print"], function (Print) {
            //create the print widget and insert into the print container
            var print = new Print({
                view: view,
                printServiceUrl: "https://printserviceurl/services/PrintService/GPServer/Export%20Web%20Map"
            }, document.getElementById("divPrintContainer"));
        });

然后我使用样式将容器放置在我想要的位置。此步骤可能需要一些自定义样式，具体取决于您希望 div 出现的位置。如果它在表单标签之外，它将阻止在与打印小部件交互时回发重新加载整个页面。

<div id="divPrintContainer" style="position:absolute;bottom:20px;right:30px;"></div>

Answer 2

我在使用草图小部件时遇到了类似的问题。看来问题是 API 的所有小部件的按钮都不是使用 type="button" 属性创建的，这导致浏览器假定其 type="submit" 和从而导致回发。在 ESRI Forum 上查看此处。为了解决任何 ArcGIS API v 4.x 小部件的问题，我一直在小部件呈现后添加属性：

var esriWidget = new Widget({
    view: this.view,
    container: 'widgetDiv',
});

$.each($('#widgetDiv').find("button"), function (i, btn) {
    $(btn).attr("type", "button");
});

这允许小部件按预期工作而不会导致回发。

ArcGIS JavaScript API 4.11 - 打印导致 asp.net 中的回发问题

ArcGIS JavaScript API 4.11 - Print causes Postback Issue in asp.net

javascript

asp.net

postback

arcgis-js-api