html2canvas +pdf 生成pdf 里面有地图时 生成空白

生成出来我用的是百度地图 生成出来：

留白：

样例：

---

 

 

处理方案

处理好生成的如下已经可以正常生成出来：

 

 

具体处理如下：

例如：本来还以为是html2canvas生成的时候设置的问题 试了各种方案 没什么效果 最终在百度地图设置完之后添加如下关键代码：

 // 解决html2canvas截图空白问题
        HTMLCanvasElement.prototype.getContext = function (origFn) {
          return function (type, attributes) {
            if (type === 'webgl') {
              attributes = Object.assign({}, attributes, {
                preserveDrawingBuffer: true,
              });
            }
            return origFn.call(this, type, attributes);
          };
        }(HTMLCanvasElement.prototype.getContext); 

完整代码代码：

let point = new BMapGL.Point(position[0], position[1]);
        let marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        // 解决html2canvas截图空白问题
        HTMLCanvasElement.prototype.getContext = function (origFn) {
          return function (type, attributes) {
            if (type === 'webgl') {
              attributes = Object.assign({}, attributes, {
                preserveDrawingBuffer: true,
              });
            }
            return origFn.call(this, type, attributes);
          };
        }(HTMLCanvasElement.prototype.getContext); 

---

 

总结：

提示：我这里是先通过html2canvas转图片 然后生成15张pdf的报告 里面有四个地图 刚开始设置延时能处理地图加载 但是设置延时又感觉不太友好 网上找了很多都没有遇到我这种情况就记录下来 留给后人参考：

相关参考链接HTMLCanvasElement.getContext() - Web API 接口参考 | MDN