使用@react-pdf/renderer下载地图PDF出现空白问题求助

问题根源分析 #

1. 地图Canvas捕获失败：Mapbox地图基于WebGL渲染，html2canvas对WebGL Canvas兼容性不佳，且地图瓦片可能存在跨域限制，导致生成的mapImage实际为空白。
2. 状态更新时机错误：setMapImage是异步操作，你在调用handlePrintMapPDFButtonClick后立即触发下载，此时mapImage尚未更新，PDF生成时仍使用旧值（null）。
3. PDF图片尺寸不兼容：A4页面宽度约为794px，你设置的width:1920px超出页面范围，导致图片无法正常显示。

具体修复方案 #

1. 替换html2canvas，直接使用Mapbox原生Canvas导出 #

Mapbox地图实例自带的getCanvas()可直接导出图片，无需依赖html2canvas，能避免WebGL捕获问题：

const handlePrintMapPDFButtonClick = async () => {
    if (mapRef.current) {
        try {
            const map = mapRef.current.getMap();
            // 等待地图所有资源加载完成（瓦片、图层）
            await new Promise(resolve => map.once('idle', resolve));
            const canvas = map.getCanvas();
            // 导出为PNG格式的DataURL
            const imgData = canvas.toDataURL("image/png");
            setMapImage(imgData);
        } catch (error) {
            console.error("Error capturing map image:", error);
        }
    } else {
        console.error("Map reference is not available");
    }
};

2. 修复状态更新与下载的时机问题 #

利用useEffect监听mapImage变化，确保图片生成完成后再触发PDF下载：

// 新增useEffect监听
useEffect(() => {
    if (mapImage && isDownloading) {
        const downloadLink = document.getElementById('pdfDownloadLink');
        if (downloadLink) {
            downloadLink.click();
        } else {
            console.error("Download link not found");
        }
        // 重置下载状态
        setIsDownloading(false);
    }
}, [mapImage, isDownloading]);

// 修改handlePrint函数
const handlePrint = async () => {
    if (!isDownloading) {
        setIsDownloading(true);
        await handlePrintMapPDFButtonClick();
    }
};

3. 调整PDF中图片的尺寸适配A4页面 #

将图片宽度设置为页面100%，避免超出范围：

const MyDocument = () => (
    <Document>
        <Page size="A4">
           {mapImage ? (
            <Image
              src={mapImage}
              style={{ width: "100%", height: "auto" }} 
            />
            ) : (
               <Text>No image available</Text>
            )}
        </Page>
    </Document>
);

4. 额外跨域保障（可选） #

如果仍存在跨域问题，确保Mapbox的瓦片资源允许被导出：

• 检查你的Mapbox Access Token是否启用了相应的域名权限
• 在Mapbox控制台的Token设置中，添加当前站点域名到允许列表

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