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

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

• 地图情况：用了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