使用wkhtmltopdf导出Leaflet地图HTML时地图显示异常的解决咨询

我之前也碰到过一模一样的情况——明明已经监听了Leaflet的load事件并设置了window-status，但生成的PDF里还是看不到地图。其实问题出在：Leaflet的map.load事件只是地图容器初始化完成的信号，而非所有瓦片资源加载并渲染完毕的标志。wkhtmltopdf触发渲染时，瓦片可能还在后台请求，自然显示不出来。下面给你几个针对性的解决方案：

1. 监听所有瓦片加载完成再触发渲染 #

放弃只监听map.load，改为等待所有瓦片加载完毕后再设置window-status。可以通过Leaflet的tileload事件统计加载进度：

var myMap = L.map('myMap',{attributionControl: false, zoomControl:false });
var tilesLoaded = 0;
var totalTiles = 0;

// 监听单个瓦片加载完成
myMap.on('tileload', function() {
  tilesLoaded++;
  // 当所有瓦片加载完成时，标记状态
  if (tilesLoaded === totalTiles) {
    window.status = 'maploaded';
  }
});

// 地图框架加载完成后，计算当前视口内需要加载的瓦片总数
myMap.on('load', function() {
  // 遍历所有瓦片图层，统计容器内的瓦片数量
  totalTiles = Object.keys(myMap._layers)
    .filter(key => myMap._layers[key] instanceof L.TileLayer)
    .reduce((count, key) => {
      return count + myMap._layers[key].getContainer().children.length;
    }, 0);
  
  // 特殊情况：如果没有瓦片图层（比如离线矢量地图），直接标记完成
  if (totalTiles === 0) {
    window.status = 'maploaded';
  }
});

// 添加你的瓦片图层（示例用OpenStreetMap）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(myMap);

2. 调整wkhtmltopdf的渲染延迟 #

即使等了瓦片加载，有时候浏览器还需要一点时间完成渲染。可以给wkhtmltopdf增加javascript-delay参数，强制延迟一段时间再生成PDF：

options = { 
  'dpi': 300, 
  'image-dpi': 400, 
  'zoom': 0.7, 
  'window-status': 'maploaded',
  'javascript-delay': 1000, // 延迟1秒，可根据实际情况调整
  'enable-javascript': true,
  'no-stop-slow-scripts': true
}

3. 确保地图容器有明确的尺寸 #

wkhtmltopdf渲染时，若地图容器没有设置固定宽高，可能会出现“零尺寸”的情况。给#myMap添加明确的CSS样式：

#myMap {
  width: 100%;
  height: 600px; /* 或者你需要的固定高度 */
  position: relative;
  overflow: hidden;
}

4. 验证瓦片资源可访问 #

如果你的瓦片是私有资源或者需要权限，wkhtmltopdf可能无法正常加载。可以先在浏览器中打开HTML，确认地图能正常显示；再尝试用wkhtmltopdf加载公开瓦片（比如OpenStreetMap）测试，排除资源访问问题。

按照上面的步骤调整后，应该就能正常导出带地图的PDF了。

内容的提问来源于stack exchange，提问作者cucuru