使用jsPDF生成PDF时内容显示为水平线，如何改为段落格式？

你使用jsPDF的fromHTML方法生成PDF时，内容显示为一条水平线，无法自动换行形成段落，核心原因是旧版本jsPDF（1.3.5）对百分比宽度支持不佳，且fromHTML本身排版能力有限。以下是几种可行的解决方法：

方法一：修正fromHTML的width参数（适配旧版本） #

旧版jsPDF的fromHTML不支持百分比格式的width，需传入具体像素数值（A4纸px单位宽度约595px，减去左右边距15px×2，设置为565px左右即可）。

修改后的JS代码：

var doc = new jsPDF("portrait", "px", "a4");
var specialElementHandlers = {
  '#editor': function(element, renderer) {
    return true;
  }
};
$('#submit').click(function() {
  // 将width改为具体像素值，而非百分比
  doc.fromHTML($('#content').html(), 15, 15, {
    'width': 565,
    'elementHandlers': specialElementHandlers
  });

  addHeaderFooters();
  doc.save('sample-page.pdf');
});

function addHeaderFooters() {
  const pageCount = doc.internal.getNumberOfPages();
  for (var i = 1; i <= pageCount; i++) {
    doc.setPage(i); // 切换到对应页面，避免覆盖正文
    doc.text('Header Text', 40, 15, {
      baseline: 'top'
    });
    doc.text('Footer text', 10, 290, {
      baseline: 'bottom'
    });
  }
}

方法二：手动拆分文本并使用text方法（适合纯文本场景） #

如果内容是纯文本，可通过splitTextToSize方法按指定宽度拆分文本，再逐行添加到PDF：

var doc = new jsPDF("portrait", "px", "a4");
$('#submit').click(function() {
  const contentText = $('#content p').text().trim();
  // 按565px宽度拆分文本，返回换行后的字符串数组
  const splitText = doc.splitTextToSize(contentText, 565);
  // 从(15,15)位置开始添加文本，自动换行
  doc.text(splitText, 15, 15);

  addHeaderFooters();
  doc.save('sample-page.pdf');
});

function addHeaderFooters() {
  const pageCount = doc.internal.getNumberOfPages();
  for (var i = 1; i <= pageCount; i++) {
    doc.setPage(i);
    doc.text('Header Text', 40, 15, {
      baseline: 'top'
    });
    doc.text('Footer text', 10, 290, {
      baseline: 'bottom'
    });
  }
}

方法三：升级jsPDF版本（推荐方案） #

旧版fromHTML功能有限，升级到2.x版本后，使用html方法替代fromHTML，对HTML段落排版的支持更完善：

先更新HTML中的jsPDF引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

修改后的JS代码：

// 2.x版本的jsPDF引入方式不同
const { jsPDF } = window.jspdf;
var doc = new jsPDF("portrait", "px", "a4");
var specialElementHandlers = {
  '#editor': function(element, renderer) {
    return true;
  }
};
$('#submit').click(async function() {
  // 使用html方法替代fromHTML，支持更完善的排版
  await doc.html($('#content').html(), {
    'x': 15,
    'y': 15,
    'width': 565,
    'elementHandlers': specialElementHandlers
  });

  addHeaderFooters();
  doc.save('sample-page.pdf');
});

function addHeaderFooters() {
  const pageCount = doc.internal.getNumberOfPages();
  for (var i = 1; i <= pageCount; i++) {
    doc.setPage(i);
    doc.text('Header Text', 40, 15, {
      baseline: 'top'
    });
    doc.text('Footer text', 10, 290, {
      baseline: 'bottom'
    });
  }
}

注意：2.x版本的html方法是异步的，需用async/await确保内容渲染完成后再添加页眉页脚和保存PDF。

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