如何使用html2pdf将多个DOM元素合并生成单个PDF文件？

实现思路 #

html2pdf支持传入元素数组，或通过临时容器包裹所有目标元素的方式，将多个页面合并为单份PDF，以下是两种可行方案：

方案一：直接传入元素数组 #

获取所有带data-page-id属性的页面元素，转为数组后直接传给html2pdf：

async function mergePagesToPDF() {
  // 获取所有页面元素
  const pageElements = document.querySelectorAll('div[data-page-id]');
  // 将NodeList转为数组
  const elementsArray = Array.from(pageElements);

  await html2pdf(elementsArray, {
    margin: 0,
    html2canvas: {
      scale: 1,
    },
    filename: "merged_all_pages.pdf",
    image: { type: "png", quality: 0.98 },
  });
}

方案二：通过临时容器包裹元素 #

若担心元素样式冲突，可创建隐藏临时容器，克隆所有页面元素后生成PDF：

async function mergePagesWithTempContainer() {
  const pageElements = document.querySelectorAll('div[data-page-id]');
  // 创建隐藏的临时容器
  const tempContainer = document.createElement('div');
  tempContainer.style.cssText = 'position:absolute; top:-9999px; left:-9999px; width:1442px;';

  // 克隆所有页面元素到容器中
  pageElements.forEach(el => {
    const clone = el.cloneNode(true);
    tempContainer.appendChild(clone);
  });

  // 临时容器加入DOM（html2pdf需元素在DOM内）
  document.body.appendChild(tempContainer);

  await html2pdf(tempContainer, {
    margin: 0,
    width: "1442px",
    height: "auto",
    html2canvas: {
      scale: 1,
    },
    filename: "merged_all_pages.pdf",
    image: { type: "png", quality: 0.98 },
  });

  // 生成完成后移除临时容器
  document.body.removeChild(tempContainer);
}

注意事项 #

• 确保所有页面元素的尺寸、样式统一，避免PDF页面大小不一致
• 若页面存在懒加载逻辑，需添加等待确保所有元素渲染完成后再执行脚本
• 若出现样式错乱，检查元素的定位、内外边距属性，确保克隆/传入的元素保留原有样式

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