使用jspdf.js和html2canvas.js转HTML为PDF时部分DIV未导出的问题

看起来你在使用jsPDF和html2canvas导出包含DIV与SVG的页面时遇到了部分DIV丢失的问题，结合你给出的代码片段，我整理了几个常见的原因和对应的解决办法：

1. 未等待所有DOM元素完全渲染 #

很多时候，动态加载的内容（比如异步请求的DIV、还在执行的动画）会在你调用导出函数时还没完成渲染，导致这些元素无法被捕获。

解决办法：确保在所有元素就绪后再执行导出逻辑，比如借助DOMContentLoaded事件，或者设置短暂延迟等待内容加载：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 额外延迟确保动态内容渲染完成（时间根据实际情况调整）
  setTimeout(() => {
    const targetSvg = document.querySelector('your-svg-selector');
    svg_to_pdf(targetSvg, function(pdf) {
      pdf.save('exported.pdf');
    });
  }, 600);
});

2. SVG转图片时的尺寸适配问题 #

你的代码里只设置了canvas.width = image.width，但如果SVG依赖viewBox定义尺寸，或者实际渲染的SVG尺寸超出了canvas的默认范围，可能导致内容截断，进而影响后续PDF合并时的元素展示。

优化SVG转图片的逻辑：

function svg_to_pdf(svg, callback) {
  svgAsDataUri(svg, {}, function(svg_uri) {
    var image = document.createElement('img');
    image.src = svg_uri;
    image.onload = function() {
      // 获取SVG的真实尺寸（优先用width/height属性，没有则取viewBox）
      const svgWidth = parseInt(svg.getAttribute('width')) || svg.viewBox.baseVal.width;
      const svgHeight = parseInt(svg.getAttribute('height')) || svg.viewBox.baseVal.height;
      
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var doc = new jsPDF('portrait', 'pt');
      
      // 匹配SVG真实尺寸
      canvas.width = svgWidth;
      canvas.height = svgHeight;
      // 完整绘制SVG图片
      context.drawImage(image, 0, 0, svgWidth, svgHeight);
      
      // 后续添加其他DIV元素到PDF的逻辑...
      callback(doc);
    };
  });
}

3. 未将其他DIV元素纳入PDF生成流程 #

从你的代码片段看，目前只处理了SVG转图片的逻辑，但没有添加其他DIV元素到PDF中。如果要导出整个页面的内容，更高效的方式是用html2canvas直接捕获包含所有DIV和SVG的父容器，再导入到jsPDF。

完整的页面导出示例：

function exportFullPageToPdf() {
  // 选择包含所有DIV和SVG的父容器
  const container = document.getElementById('page-container');
  
  html2canvas(container, {
    useCORS: true, // 处理跨域图片资源
    scale: 2, // 提高导出清晰度
    logging: false // 关闭日志输出
  }).then(canvas => {
    // 创建与画布尺寸匹配的PDF
    const pdf = new jsPDF('portrait', 'pt', [canvas.width, canvas.height]);
    // 将画布内容添加到PDF
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height);
    // 保存PDF
    pdf.save('full-page-export.pdf');
  });
}

4. CSS样式导致元素不可见 #

部分DIV可能因为display: none、visibility: hidden，或者响应式媒体查询下的隐藏规则，导致html2canvas无法捕获到它们。

临时修改样式确保元素可见：

function exportFullPageToPdf() {
  const container = document.getElementById('page-container');
  // 记录需要临时显示的隐藏元素
  const hiddenElements = [...container.querySelectorAll('[style*="display: none"], .hidden')];
  
  // 临时显示隐藏元素
  hiddenElements.forEach(el => el.style.display = 'block');
  
  html2canvas(container).then(canvas => {
    // 恢复元素原有样式
    hiddenElements.forEach(el => el.style.display = 'none');
    
    const pdf = new jsPDF('portrait', 'pt', [canvas.width, canvas.height]);
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save('full-page-export.pdf');
  });
}

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