使用jsPDF+html2canvas转PDF时右侧文本截断的解决方法

以下是针对文本截断、内容缺失问题的具体解决方法，兼顾多页PDF需求与文件体积控制：

1. 修正html2canvas的捕获范围与缩放参数 #

右侧截断通常是因为html2canvas默认只捕获可视区域内容，需明确指定目标元素的完整宽高：

const targetEl = document.getElementById('pdf-content');
const canvas = await html2canvas(targetEl, {
  width: targetEl.scrollWidth, // 捕获元素完整宽度，而非可视宽度
  height: targetEl.scrollHeight, // 捕获元素完整高度
  scale: 2, // 提高缩放比保证清晰度，同时避免内容被裁剪
  logging: false, // 关闭日志减少性能消耗
  useCORS: true // 若包含跨域图片需开启，否则可关闭
});

• 验证：打印canvas.width，确认其与targetEl.scrollWidth一致，确保完整捕获内容。

2. 匹配jsPDF页面尺寸与画布比例 #

确保PDF页面尺寸与画布的宽高比完全适配，避免强制缩放导致裁剪：

const pdf = new jsPDF('p', 'mm', 'a4'); // 纵向A4，单位mm
const imgWidth = 210; // A4页面宽度（不含边距）
const imgHeight = (canvas.height * imgWidth) / canvas.width; // 按比例计算画布高度
let position = 0;

// 首页添加画布
pdf.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight);

// 多页处理：若内容高度超过单页，自动分页
let remainingHeight = imgHeight;
const pageHeight = 297; // A4页面高度
while (remainingHeight > pageHeight) {
  position -= pageHeight;
  remainingHeight -= pageHeight;
  pdf.addPage();
  pdf.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight);
}

pdf.save('result.pdf');

• 若需保留边距：将imgWidth设为200（左右各留5mm边距），确保内容完全在页面范围内。

3. 调整页面CSS避免隐藏内容 #

临时修改目标元素的CSS，防止overflow或固定宽度导致内容被裁剪：

#pdf-content {
  overflow: visible !important; /* 取消溢出隐藏 */
  max-width: 210mm !important; /* 匹配A4页面宽度（约794px） */
  width: fit-content !important; /* 自适应内容宽度 */
}

• 注意：执行捕获前添加上述样式，完成后恢复原样式避免影响页面布局。

4. 分块捕获多页内容（适合超长文档） #

对于超过5页的内容，拆分内容为独立的页面区块，逐个捕获添加到PDF，避免单张大画布的缩放问题：

const pdf = new jsPDF('p', 'mm', 'a4');
const sections = document.querySelectorAll('.pdf-section'); // 预先将内容拆分为.page-section区块

for (let i = 0; i < sections.length; i++) {
  const section = sections[i];
  const canvas = await html2canvas(section, { scale: 2 });
  const imgWidth = 210;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  
  pdf.addImage(canvas, 'PNG', 0, 0, imgWidth, imgHeight);
  if (i !== sections.length - 1) pdf.addPage(); // 最后一页不新增空白页
}

pdf.save('multi-page.pdf');

• 优势：单页捕获避免大画布的内存占用，同时保证每页内容完整无裁剪。

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