从Three.js可视化器画布下载PDF遇问题：jsPDF生成空白文件

我看你尝试用jsPDF把Three.js可视化画布导出成PDF，但遇到了导出后PDF空白的问题，这大概率是图片加载异步或者渲染时机没卡准导致的，咱们一步步来搞定它：

为啥会出现空白？ #

• 你创建<img>元素后，还没等图片加载完成就调用了doc.fromHTML()，这时候图片还没渲染出来，PDF自然是空的
• 调用render()后，Three.js的画布可能还没完成像素更新，直接取toDataURL可能拿到旧的或者空的图像数据
• 用fromHTML()处理图片确实不如jsPDF自带的addImage()靠谱，后者专门用来处理图像数据，不容易出问题

最靠谱的解决方案：直接用addImage()处理画布数据 #

咱们可以跳过创建img元素的步骤，直接把Three.js画布的DataURL传给addImage()，同时确保Three.js已经完成当前帧的渲染，还能适配PDF页面尺寸。

完整修正代码示例 #

// 先确保你已经初始化了jsPDF实例
const doc = new jsPDF();

function Download() {
  // 强制Three.js渲染当前帧，保证画布数据是最新的
  renderer.render(scene, camera);
  
  // 获取画布的DataURL，用PNG格式能保留清晰画质和透明背景
  const imgData = renderer.domElement.toDataURL('image/png');
  
  // 获取画布实际尺寸和PDF页面尺寸
  const canvasWidth = renderer.domElement.width;
  const canvasHeight = renderer.domElement.height;
  const pdfPageWidth = doc.internal.pageSize.getWidth();
  const pdfPageHeight = doc.internal.pageSize.getHeight();
  
  // 计算缩放比例，让图片适配PDF页面（避免超出A4纸范围）
  const scale = Math.min(pdfPageWidth / canvasWidth, pdfPageHeight / canvasHeight);
  
  // 让图片在PDF页面居中显示
  const x = (pdfPageWidth - canvasWidth * scale) / 2;
  const y = (pdfPageHeight - canvasHeight * scale) / 2;
  
  // 直接把图像添加到PDF
  doc.addImage(imgData, 'PNG', x, y, canvasWidth * scale, canvasHeight * scale);
  
  // 保存PDF文件
  doc.save('threejs-visualization.pdf');
}

要是你非得用fromHTML()的话（不太推荐） #

如果一定要通过DOM元素来渲染，必须等图片加载完成后再处理PDF，给img元素加个onload事件就行：

function Download() {
  renderer.render(scene, camera);
  const imgData = renderer.domElement.toDataURL('image/jpeg', 0.5);
  const imgNode = document.createElement("img");
  
  // 等图片加载完再生成PDF
  imgNode.onload = function() {
    doc.fromHTML(imgNode, 15, 15, {
      'width': window.innerWidth,
      'elementHandlers': elementHandler
    }, function() {
      // 渲染完成后保存并移除临时img元素
      doc.save('threejs-screenshot.pdf');
      document.body.removeChild(imgNode);
    });
  };
  
  imgNode.src = imgData;
  imgNode.id = "screenshot";
  document.body.appendChild(imgNode);
}

额外要注意的点 #

• 确保renderer、scene、camera在Download函数里能正常访问（比如是全局变量或者通过闭包获取）
• 如果你的场景是用requestAnimationFrame做的动画循环，调用renderer.render(scene, camera)只会生成当前帧的静态图，不会打断动画
• 优先用image/png格式导出，比JPEG更清晰，还能保留场景里的透明效果

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