获取当前 Esri Map 的屏幕截图并使用 Angular PDf 导出将其保存为 Pdf？答案

【问题标题】：Get a screenshot of current Esri Map and save it as a Pdf using Angular PDf export?获取当前 Esri Map 的屏幕截图并使用 Angular PDf 导出将其保存为 Pdf？
【发布时间】：2022-01-14 12:50:19
【问题描述】：

我已在我的 Angular 应用程序中集成了 Esri 地图。在应用程序中有一个下载按钮，用户单击该下载按钮，Esri 地图的屏幕截图应隐式获取，该屏幕截图应将其下载为 pdf。

您能帮我解决这个问题吗？

arcgis-js-api 版本 4.2.1 角度版本 11。

.ts 文件

 initializeMap(esriToken) {
    const container = this.mapViewEl.nativeElement;
    config.apiKey = esriToken;
    const horizonData: any[] = this.esiriData || [];

//load the webMap
const webmap = new WebMap({
      portalItem: {
        id: this.webMapId
      }
    });

// load the feature layer
const layer = new FeatureLayer({
    url: this.featureLayerUrl,
    });
  webmap.add(layer);

const view = new MapView({
  container,
  map: webmap,
});

  let options = {
    width: 2048,
    height: 2048
  };

  view.takeScreenshot(options).then(function(screenshot) {
    let imageElement = document.getElementById("screenshotImage");
    imageElement.src = screenshot.dataUrl;
  });
  this.view = view;

  return this.view.when();

  }

.html 文件

<kendo-pdf-export #pdf paperSize="A4" margin="1cm" [scale]="scale">
<!-- Map Div -->
<div #mapViewNode></div>
 <div class="float-right">
              <div class="downloa-ico pr-1 float-left" (click)="pdf.saveAs('sample.pdf')"></div>
            </div>
</kendo-pdf-export>

【问题讨论】：

嗨@KalanaTebel，看看这个问题/答案，这是一个类似的问题how-to-get-a-screenshot-of-the-esri-map-angular，如果它解决了你的问题或者是其他问题，请告诉我
嗨@cabesuon。是的，直到我已经完成的那个级别。我关心的是如何在没有用户手动截取屏幕截图然后将其保存为 pdf 的情况下隐式截取该屏幕截图。不是png或jpg。谢谢

标签： angular pdf screenshot arcgis-js-api

【解决方案1】：

这里有一个使用过去示例的基本代码和库 jsPDF 生成 PDF 而不是图像的示例。

按钮只是一个关于如何调度动作的示例（在本例中是屏幕截图 + pdf 生成），它可以是任何东西。

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Screenshot to PDF - Example</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #screenshotDiv {
            position: absolute;
            top: 0;
            right: 0;
            background-color: transparent;
            z-index: 1;
            display: flex;
            flex-direction: column;
        }
        .action-button {
            width: 200px;
            padding: 0.6em;
            border: 1px solid #0079c1;
            text-align: center;
            background-color: white;
            cursor: pointer;
        }
        .action-button:hover,
        .action-button:focus {
            background: #0079c1;
            color: white;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/css/main.css">
    <script>
        const options = {
            dojoConfig: {
                async: true,
                packages: [
                    {
                        location: 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js',
                        name: 'jsPDF'
                    }
                ]
            }
        };
    </script>
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"
        ], function (Map, MapView, jsPDF) {

            const map = new Map({
                basemap: "streets-navigation-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 12,
                center: {
                    latitude: 32.7353,
                    longitude: -117.1490
                }
            });

            const btn = document.getElementById("screenshotBtn");
            const img = document.getElementById("screenshotImg");

            view.when(function() {
                btn.addEventListener("click", function() {
                    view.takeScreenshot({
                            width: 400,
                            height: 400
                        }).then(function(screenshot) {
                            var doc = new jsPDF.jsPDF({
                                orientation: 'p',
                                unit: 'px',
                                format: 'a4'
                            })
                            doc.setFontSize(40)
                            doc.text(35, 25, 'This is your screenshot')
                            doc.addImage(screenshot.dataUrl, 'PNG', 15, 40, 200, 200)
                            doc.save("screenshot.pdf");
                    });
                });
            });

        });
    </script>
</head>

<body>
    <div id="viewDiv" class="esri-widget">
        <div id="screenshotDiv">
            <button id="screenshotBtn" class="action-button esri-widget">
                Take Screenshot
            </button>
        </div>
    </div>
</body>

</html>

【讨论】：

嗨！我的地图是一个组件，屏幕截图按钮在另一个组件中。那么在那种情况下，我该如何实现呢？
如果屏幕截图按钮组件是地图组件的子组件，那么它很简单，只需向父组件，即地图组件 (angular docs - output) 发出事件。如果它不是孩子，那么，1）使用output，您将不得不将事件冒泡到第一个共同祖先；然后，2) 使用input 将其推到地图上。我假设您正在使用“纯”角度组件交互方法。
是的，明白了！非常感谢:)
很高兴它有效！