前端实现带滚动区域的DOM长截图导出完整步骤

{/* 导出目标容器（ref={contentRef}） */}
 <div ref={reportContentRef} className="export-container">
      <ReportHeader reportData={reportData} />
      <FirstTab reportData={reportData} isExport={isExport} />
      <SecondTab reportData={reportData} mapUrl={mapUrl} isExport={isExport} />
      <ThirdTab reportData={reportData} isExport={isExport} />
      <ReportFooter />
    </div>

 // 导出报告为图片
  const handleExportReport = async () => {
    if (!reportContentRef.current) {
      message.error('无法获取报告内容');
      return;
    }
    try {
      setExportLoading(true);
      // 使用 @zumer/snapdom 组件实现 html转canvas
      const contentCanvas = await snapdom.toCanvas(reportContentRef.current, {
        // 配置选项
        dpr: 3,
        scale: 2,
        backgroundColor: '#e7f0fa',
      });

      // 转换为图片数据URL
      const dataUrl = contentCanvas.toDataURL('image/png');

      // 下载截图
      const link = document.createElement('a');
      link.download = `${reportData?.createTime}${reportData?.stationName}评估报告.jpg`;
      link.href = dataUrl;
      link.click();
      link.remove();

      message.success('报告导出成功');
      setExportLoading(false);
    } catch (error) {
      message.error('报告导出失败，请重试');
      setExportLoading(false);
    }
  };