如何在html2pdf中导出包含独立标题和背景图的PDF？

核心思路 #

当前代码仅导出main-content-para区域，要包含标题（banner内的h1）和背景图，需将所有目标元素纳入html2pdf的渲染范围。针对布局特殊的场景，提供两种可行方案：

方案1：新增统一容器（最简实现） #

如果允许调整现有DOM结构，直接给需要导出的元素包裹一个父容器，导出该容器即可：

修改后的HTML

<div id="export-container">
  <div class="banner">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </div>

  <div id="main-content-para">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie ultricies elit vel porta. Nam pretium augue vel risus euismod tempor. Etiam nec est consectetur, tempus urna in, vestibulum quam. Sed semper elit ac ultrices condimentum. Sed efficitur bibendum orci. Donec vitae odio fringilla, blandit ante auctor, rhoncus est. Suspendisse accumsan ex nec lacus sagittis pharetra. Phasellus vitae auctor justo. Donec ac vestibulum magna. Cras enim magna, feugiat ut sollicitudin sit amet, dapibus sed leo. Phasellus vitae condimentum urna, vitae sodales nunc. Vestibulum sed nisl at leo mollis molestie. Curabitur at nulla sit amet metus finibus commodo eu quis odio. Mauris ut eros elementum, congue eros in, euismod quam. Donec quis dui quis nunc elementum hendrerit. Suspendisse tristique, est feugiat imperdiet dictum, augue tortor convallis mauris, at euismod urna mauris in lorem. Vestibulum id arcu at enim lacinia dictum. Ut interdum interdum dui vitae varius. Etiam bibendum diam nec elit sagittis consequat. Nulla eleifend dictum nisl, ac pellentesque erat scelerisque in. Praesent consequat porta mauris, ut fermentum turpis dictum et. </p>
  </div>
</div>
<a href="javascript:void(0)" onclick="generate()" class="btn">Export here</a>

修改后的JS

function generate() {
   let element = document.getElementById('export-container')
   html2pdf(element, {
      margin: 10,
      filename: 'output.pdf',
      image: {
         type: 'jpeg',
         quality: 0.98
      },
      html2canvas: {
         scale: 2,
         logging: true,
         dpi: 192,
         letterRendering: true,
         useCORS: true // 解决跨域背景图无法渲染的问题
      },
      jsPDF: {
         unit: 'mm',
         format: 'a4',
         orientation: 'portrait'
      }
   });
}

方案2：临时虚拟容器（不修改原有布局） #

如果无法调整原DOM结构，通过创建临时容器克隆目标元素，导出完成后再移除临时容器：

修改后的JS

function generate() {
  // 创建临时容器并匹配原布局样式
  const tempContainer = document.createElement('div');
  tempContainer.style.width = '100%';
  tempContainer.style.boxSizing = 'border-box';
  
  // 克隆需要导出的元素
  const bannerClone = document.querySelector('.banner').cloneNode(true);
  const contentClone = document.getElementById('main-content-para').cloneNode(true);
  
  // 组装临时容器并加入DOM（html2pdf仅渲染DOM内元素）
  tempContainer.appendChild(bannerClone);
  tempContainer.appendChild(contentClone);
  document.body.appendChild(tempContainer);

  // 执行导出
  html2pdf(tempContainer, {
      margin: 10,
      filename: 'output.pdf',
      image: {
         type: 'jpeg',
         quality: 0.98
      },
      html2canvas: {
         scale: 2,
         logging: true,
         dpi: 192,
         letterRendering: true,
         useCORS: true // 处理跨域背景图渲染
      },
      jsPDF: {
         unit: 'mm',
         format: 'a4',
         orientation: 'portrait'
      }
   }).then(() => {
      // 导出完成后清理临时容器
      document.body.removeChild(tempContainer);
   });
}

关键注意事项 #

• 跨域背景图处理：必须在html2canvas配置中添加useCORS: true，否则外部链接的背景图无法被导出。
• 样式一致性：临时容器需匹配原页面的宽度、盒模型等样式，避免导出内容布局错乱。
• DOM依赖：html2pdf只能渲染当前存在于DOM中的元素，因此临时容器必须先加入页面再执行导出。

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