使用html2canvas生成fullcalendar-scheduler PDF失败求助

我之前踩过html2canvas和FullCalendar Scheduler配合生成PDF的不少坑，结合你提到的实现方案，咱们来拆解问题并给出可行的修复方案：

可能的问题点 #

• DOM渲染时机不对：html2canvas可能在日历的动态内容（比如异步加载的事件、滚动区域的内容）还没完全渲染完成就执行了截图，导致内容缺失或不全。
• html2canvas配置不足：缺少必要的参数（比如分辨率、滚动区域捕获），或者没有处理日历容器的overflow样式，导致部分内容被截断。
• jsPDF尺寸适配错误：canvas图片和A4纸的比例不匹配，导致图片被裁剪、缩放失真。

可行的修复方案 #

1. 确保日历完全渲染后再截图 #

FullCalendar有专属的事件可以监听渲染完成，比如rendered或eventsRender，避免在DOM未就绪时执行截图：

// 假设你初始化日历的代码是这样的
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  // 你的日历配置...
  schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  events: '/your-events-endpoint'
});

// 在日历事件加载完成并渲染后触发截图
calendar.on('eventsRender', function() {
  window.takeScreenShot();
});

calendar.render();

2. 优化html2canvas的配置并处理DOM样式 #

临时调整日历容器的overflow属性，确保所有内容都能被捕获，同时提高截图分辨率避免PDF模糊：

window.takeScreenShot = function() {
  const calendarEl = document.getElementById("calendar");
  // 临时保存原始overflow样式，后续恢复
  const originalOverflow = calendarEl.style.overflow;
  calendarEl.style.overflow = 'visible';

  html2canvas(calendarEl, {
    allowTaint: true, // 允许跨域内容（如果有）
    useCORS: true, // 启用CORS处理跨域图片
    scale: 2, // 提高分辨率，解决PDF模糊问题
    height: calendarEl.scrollHeight, // 捕获整个日历的滚动高度
    width: calendarEl.scrollWidth, // 捕获整个日历的滚动宽度
    logging: false // 关闭日志，减少干扰
  }).then(function(canvas) {
    // 恢复原始overflow样式
    calendarEl.style.overflow = originalOverflow;

    // 适配A4纸尺寸，处理分页
    const imgWidth = 210; // A4宽度（mm）
    const pageHeight = 297; // A4高度（mm）
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let remainingHeight = imgHeight;
    let yPosition = 0;

    const doc = new jsPDF('portrait', 'mm', 'a4');
    const imgData = canvas.toDataURL("image/jpeg", 0.9); // 调整图片质量（0-1）

    // 处理长内容分页
    while (remainingHeight >= 0) {
      doc.addImage(imgData, 'JPEG', 0, yPosition, imgWidth, imgHeight);
      remainingHeight -= pageHeight;
      yPosition -= pageHeight;
      if (remainingHeight > 0) {
        doc.addPage();
      }
    }

    doc.save('calendar-schedule.pdf');
  }).catch(function(error) {
    console.error('截图生成失败:', error);
    // 出错时也要恢复原始样式
    calendarEl.style.overflow = originalOverflow;
  });
};

3. 额外注意事项 #

• 跨域图片处理：如果日历中包含跨域图片，需要确保图片服务器配置了CORS，或者提前将图片转换为base64格式。
• CSS兼容性：html2canvas对transform、filter等部分CSS属性支持有限，可以临时替换为兼容性更好的样式（比如用margin代替transform: translate）再执行截图。
• 异步内容等待：如果日历数据是异步加载的，一定要等待数据完全返回并渲染后再触发截图，比如在fetch的then回调中调用截图函数。

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