如何用jsPDF将带Z轴层级的Div保存为单页PDF？

问题背景 #

需要将依赖main.css、包含多层图片与文本（按Z轴层级排列）的Div通过jsPDF保存为PDF，但现有代码存在两个问题：

• 首次点击按钮生成空白PDF
• 第二次点击生成5页PDF（每个层级占一页），无法实现多层叠加显示

问题原因 #

1. 全局jsPDF实例重复使用：原代码中doc是全局变量，每次点击都会往同一个实例中添加内容，导致多次点击后页面累积。
2. 原生fromHTML对复杂样式支持不足：fromHTML无法很好地解析z-index层级和复杂CSS样式，会把多层元素拆分成单独页面，且可能因样式加载不及时导致首次生成空白。

解决方案 #

改用html2canvas配合jsPDF实现，html2canvas能将目标Div完整渲染为Canvas（保留所有视觉样式和Z轴层级），再将Canvas转为PDF图片，确保单页显示且样式准确。

步骤1：引入依赖 #

在HTML中添加html2canvas的本地引用（需先下载对应文件到本地目录）：

<link rel="stylesheet" type="text/css" href="main.css">
<script src="Connections/jspdf.min.js"></script>
<script src="Connections/html2canvas.min.js"></script>

步骤2：修改saveDiv函数 #

每次调用时创建新的jsPDF实例，通过html2canvas异步渲染目标Div：

function saveDiv(divId, title) {
  const targetElement = document.getElementById(divId);
  // 每次创建新的jsPDF实例，避免内容累积
  const doc = new jsPDF('p', 'px', [587, 956]);

  html2canvas(targetElement, {
    scale: 2, // 提高渲染分辨率，避免PDF模糊
    useCORS: true // 若Div包含跨域图片，需开启此选项
  }).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pageWidth = doc.internal.pageSize.getWidth();
    // 按页面宽度等比例计算图片高度
    const imgHeight = (canvas.height * pageWidth) / canvas.width;
    // 将Canvas图片添加到PDF，覆盖整页
    doc.addImage(imgData, 'PNG', 0, 0, pageWidth, imgHeight);
    // 保存PDF
    doc.save(`${title}.pdf`);
  });
}

关键改进点 #

• 每次创建新的jsPDF实例：彻底解决多次点击累积页面的问题。
• html2canvas渲染：完整保留Div的Z轴层级、CSS样式和视觉效果，避免fromHTML的样式解析缺陷。
• 异步渲染确保加载完成：等待Div及其样式、图片加载完成后再生成PDF，解决首次点击空白的问题。

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