vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)

最新推荐文章于 2024-02-05 13:41:44 发布

xlostx

最新推荐文章于 2024-02-05 13:41:44 发布

阅读量1.9k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/xlostx/article/details/123849034

版权

本文记录了在Vue项目中结合html2canvas和ArcGIS 3.x实现地图一键截图功能所遇到的挑战，包括地图组件的封装导致html2canvas失效的问题，以及如何通过在地图外层添加div并指定ref来解决这个问题。

摘要由CSDN通过智能技术生成

坑有点多，层出不穷。好在还是基本做出来了。。。

地图情况：用了position：fixed定位，地图上还有各种自己画的线段、点、多边形区域。
功能目标：一键截图，能把地图区域的内容直接截取出来。

1、基础截图功能代码：

先安装html2canvas

装包： npm install --save html2canvas

导入： import html2canvas from 'html2canvas';

<el-button type="success" size="mini" icon="el-icon-scissors" @click="screenShot">
    截图工具
</el-button>
...
<div id="mapView" ref="target">......地图......</div>

screenShot() {
    html2canvas(this.$refs.target, {
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
    }).then((canvas) => {
        if (navigator.msSaveBlob) {
            //IE10+
            let blob = canvas.msToBlob();
            return navigator.msSaveBlob(blob