使用html2canvas+jsPDF生成PDF时文本被推出div问题求助

AI 小北

2026-6-21

问题：DaisyUI构建的Div在html2canvas生成PDF时段落溢出容器

我用DaisyUI构建了一个包含段落的简单div，在通过html2canvas结合jsPDF生成PDF时，段落被向下推出div范围，尝试多种方法仍无法解决。

HTML代码

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

PDF生成TypeScript代码

export async function eyeReportToImage(eye: string) {
  const report = document.getElementById('pdf-report')
  if (!report)
    throw new Error('Report element not found')

  const pdfPageElement = document.getElementById(`my-pdf-page`)
  if (!pdfPageElement)
    throw new Error(`PDF page element not found  `)

  try {
    report.classList.remove('hidden')
    const canvas = await html2canvas(pdfPageElement, {
      scale: 3,
      width: 800,
      height: 1100,
      windowWidth: 800,
      windowHeight: 1100,
      useCORS: true,
      logging: false,
    })
    report.classList.add('hidden')
    return canvas.toDataURL('image/jpeg', 1)
  }
  catch (error) {
    report.classList.add('hidden')
    throw error
  }
}