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

最新推荐文章于 2025-01-17 14:50:46 发布

原创最新推荐文章于 2025-01-17 14:50:46 发布 · 2.0k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

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

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

地图情况：用了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, name);
        } else {        
            this.addWatermark(canvas); //在图片上加水印
            let imageurl = canvas.toDataURL("image/png");
            //图片转为下载路径 // toDataURL 图片格式转成 base64
            let imagename = "截图";
            this.fileDownload(imageurl, imagename);
        }
    })
},
//下载图片
fileDownload(downloadUrl, downloadName) {
    let aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = downloadUrl;
    aLink.download = `${downloadName}.jpg`;
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
},

2、地图被封装成了一个组件,html2canvas无效了

在地图组件外层加一个div包住，指定ref="target"， html2canvas就能识别了。

无效：
<mapView ref="target"></mapView>
 

有效：
<div style="width: 100%; height: 100%; position: relative" ref="target">
    <mapView></mapView>
</div>