如何基于元素尺寸使用html2pdf生成单页PDF文件

要实现按purchase-paper元素的实际尺寸生成单页PDF，需要调整配置让PDF尺寸完全匹配元素大小，同时强制禁止分页。具体修改如下：

1. 获取元素实际尺寸并转换单位：先获取元素的宽高（像素），再转换为html2pdf配置使用的英寸单位（1英寸=96像素）。
2. 设置自定义PDF尺寸：将jsPDF的format改为元素的宽高数组。
3. 强制单页：添加pagebreak配置禁用所有分页逻辑。

修改后的完整代码：

function generatePDF() {
  const element = document.getElementById('purchase-paper');
  // 获取元素实际宽高（像素）
  const elementWidth = element.offsetWidth;
  const elementHeight = element.offsetHeight;
  // 转换为英寸单位（1英寸=96像素）
  const inchWidth = elementWidth / 96;
  const inchHeight = elementHeight / 96;

  const opt = {
    margin: 0, // 移除边距，避免元素被裁剪或出现空白
    filename: 'test.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    jsPDF: { 
      unit: 'in', 
      format: [inchWidth, inchHeight], // 使用元素的自定义尺寸
      orientation: 'portrait' 
    },
    pagebreak: { mode: ['avoid-all'] } // 强制禁用分页
  };

  html2pdf().set(opt).from(element).save();
  console.log("PDF生成完成");
};

关键说明： #

• margin设为0：确保元素完全填充PDF页面，不会因边距导致内容压缩或出现多余空白。
• 自定义format：直接使用元素转换后的英寸尺寸，让PDF页面大小和元素完全一致。
• pagebreak配置：avoid-all会禁止html2pdf自动分页，确保内容仅在一页显示。

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