使用html2pdf无法下载Mapbox地图，求技术解决方案

使用html2pdf工具导出网页内容时，页面文本和样式能正常导出，但Mapbox地图在PDF中完全缺失。相关代码如下：

document.getElementById("download")
.addEventListener("click", () => {

  HTMLCanvasElement.prototype.getContext = function(origFn) {
    return function(type, attribs) {
    attribs = attribs || {};
    attribs.preserveDrawingBuffer = true;
    return origFn.call(this, type, attribs);
    };
    }(HTMLCanvasElement.prototype.getContext);

    const mapDownload = this.document.getElementById("mapDownload");
    console.log(window);
    var opt = {
        margin: 1,
        filename: 'myfile.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true, },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
    };
    html2pdf().from(mapDownload).set(opt).save();
})

网页显示效果：

导出的PDF效果：

解决方案 #

1. 提前配置Mapbox的preserveDrawingBuffer #

你当前在点击导出时才修改canvas的getContext，但Mapbox的地图canvas已经初始化完成，这个设置不会对现有地图生效。必须在Mapbox地图初始化阶段就开启preserveDrawingBuffer，让地图canvas保留绘制缓存，这样html2canvas才能抓取到地图内容：

// 初始化Mapbox地图时加入该配置
const map = new mapboxgl.Map({
  container: 'map', // 你的地图容器ID
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40],
  zoom: 9,
  preserveDrawingBuffer: true // 关键配置
});

2. 确保导出前地图完全渲染 #

Mapbox地图是异步加载瓦片资源的，导出时可能地图还没渲染完成。可以通过html2canvas的onclone回调触发地图重绘，确保canvas内容更新：

var opt = {
    margin: 1,
    filename: 'myfile.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { 
        scale: 2, 
        useCORS: true,
        onclone: (doc) => {
            const mapContainer = doc.getElementById('map');
            if (mapContainer) {
                map.resize(); // 触发地图重绘，保证canvas内容完整
            }
        }
    },
    jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
};

3. 直接抓取Mapbox的canvas转为图片（备选方案） #

如果上面的方法都无效，可以先把Mapbox的canvas转为图片，替换原地图容器后再导出，导出完成后恢复原地图：

document.getElementById("download")
.addEventListener("click", async () => {
    // 获取Mapbox的canvas元素
    const mapCanvas = map.getCanvas();
    // 将canvas转为base64图片
    const mapImageData = mapCanvas.toDataURL('image/png');
    
    // 临时替换地图容器内容为图片
    const mapContainer = document.getElementById('map');
    const originalContent = mapContainer.innerHTML;
    const tempImg = document.createElement('img');
    tempImg.src = mapImageData;
    tempImg.style.width = '100%';
    tempImg.style.height = '100%';
    mapContainer.innerHTML = '';
    mapContainer.appendChild(tempImg);
    
    // 等待图片加载完成再导出
    await new Promise(resolve => tempImg.onload = resolve);
    
    // 执行导出
    const mapDownload = document.getElementById("mapDownload");
    var opt = {
        margin: 1,
        filename: 'myfile.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
    };
    await html2pdf().from(mapDownload).set(opt).save();
    
    // 恢复原地图内容并重新渲染
    mapContainer.innerHTML = originalContent;
    map.resize();
});

4. 检查跨域权限 #

确认你的域名已在Mapbox控制台添加为允许的访问来源，避免瓦片资源因跨域问题无法被html2canvas抓取。即使设置了useCORS: true，如果Mapbox端没有配置允许域名，还是会出现资源加载失败的情况。

内容的提问来源于stack exchange，提问作者Kabir Ul Althamash