Angular 12中使用jsPDF生成PDF及内容显示不全问题求助

核心问题原因 #

当前使用doc.html()方法时，未配置分页、边距和缩放参数，导致超出单页的内容被截断，同时表格宽度可能超出A4页面范围，造成横向内容丢失。

具体修复方案 #

1. 调整jsPDF配置参数 #

修改你的dwdHufForm函数，添加自动分页、边距和缩放配置，确保内容适配A4页面并自动分页：

dwdHufForm(){
  const DATA = this.pdfTable.nativeElement;
  const doc: jsPDF = new jsPDF("p", "mm", "a4");
  
  // 定义页面边距，避免内容贴边被截断
  const pageMargins = { top: 10, bottom: 10, left: 10, right: 10 };

  doc.html(DATA, {
    callback: (doc) => {
      doc.output("dataurlnewwindow");
    },
    // 开启自动分页，按文本内容切割分页
    autoPaging: 'text',
    // 设置页面边距
    margin: pageMargins,
    // 缩放内容以适配页面宽度（减去边距后的宽度）
    width: doc.internal.pageSize.getWidth() - pageMargins.left - pageMargins.right,
    // 可选：直接设置缩放比例，根据实际内容调整
    // scale: 0.9
  });
}

2. 优化HTML容器样式 #

确保PDF渲染的容器宽度适配A4页面，避免表格横向溢出：
给#pdfTable容器添加样式限制宽度，修改HTML如下：

<div id="pdfTable" #pdfTable class="w-100 border h-100 fs-6 fst-normal text-dark px-2 py-4" style="max-width: 190mm;">

（注：190mm是A4宽度210mm减去左右各10mm边距后的数值）

同时调整字体大小为合适尺寸（比如fs-6），避免过小导致内容模糊。

3. 移除无效的全局字体设置 #

你之前调用的doc.setFontSize(5)对doc.html()渲染的内容无效，因为该方法会优先使用元素自身的CSS字体样式，可直接删除这行代码，通过HTML容器的类或内联样式控制字体大小。

关键参数说明 #

• autoPaging: 'text'：让jsPDF根据文本内容自动分页，避免生硬切割元素
• margin：设置页面边距，防止内容被页面边缘截断
• width/scale：控制内容缩放比例，确保表格等宽元素适配PDF页面宽度

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