如何在SAPUI5中添加分页后避免图片与表格被拆分？

问题场景 #

在SAPUI5应用中，通过HTML格式化动态生成的页面，使用html2canvas将页面转为图片，再通过jsPDF生成PDF。已将SVG图片转为普通图片添加到body-div，但分页后图片和表格仍被截断拆分，当前使用的分页代码如下：

let oImgData = null;
let dataURL = null;
let pages = Math.ceil(data.height / data.page.height);
for (let i = 0; i < pages; i++) {
  if (i != 0) {
    doc.addPage();
  }
  oImgData = data.ctx.getImageData(0, data.page.height * i, data.page.width, data.page.height);
  dataURL = getData(oImgData, data.page.width, data.page.height);
  doc.addImage(dataURL, 'PNG', doc.margin.horiz, doc.margin.vert, doc.work.width, doc.work.height);
}

解决方案 #

1. 手动调整DOM避免元素跨页

提前计算页面中图片、表格等元素的位置和高度，判断是否会被当前页截断。若存在跨页风险，在元素前插入空白div填充当前页剩余空间，将元素挤到下一页：

const printContainer = document.getElementById('print-div');
const elements = printContainer.querySelectorAll('img, table');
const pageHeight = doc.internal.pageSize.getHeight() - doc.margin.vert * 2;

elements.forEach(el => {
  const rect = el.getBoundingClientRect();
  const containerRect = printContainer.getBoundingClientRect();
  const elTop = rect.top - containerRect.top;
  const elBottom = elTop + rect.height;
  
  // 计算当前页剩余高度
  const currentPageRemaining = pageHeight - (elTop % pageHeight);
  
  // 如果元素超出当前页剩余空间，插入空白div
  if (rect.height > currentPageRemaining) {
    const spacer = document.createElement('div');
    spacer.style.height = `${currentPageRemaining}px`;
    el.parentNode.insertBefore(spacer, el);
  }
});

2. 分片渲染页面内容（替代全局canvas截取）

不对整个canvas进行分片截取，而是针对每页区域单独调用html2canvas渲染，确保每页内容都是完整的块：

async function generatePDF() {
  const doc = new jsPDF('p', 'mm', 'a4');
  const margin = 10;
  const pageWidth = doc.internal.pageSize.getWidth() - margin * 2;
  const pageHeight = doc.internal.pageSize.getHeight() - margin * 2;
  const printDiv = document.getElementById('print-div');
  const totalHeight = printDiv.offsetHeight;
  let currentY = 0;

  while (currentY < totalHeight) {
    if (currentY !== 0) {
      doc.addPage();
    }
    
    // 渲染当前页范围内的内容
    const canvas = await html2canvas(printDiv, {
      y: currentY,
      height: Math.min(pageHeight, totalHeight - currentY),
      windowWidth: printDiv.scrollWidth,
      useCORS: true,
      scale: 2 // 提升清晰度
    });
    
    const imgData = canvas.toDataURL('image/png');
    doc.addImage(imgData, 'PNG', margin, margin, pageWidth, (canvas.height / canvas.width) * pageWidth);
    
    currentY += pageHeight;
  }
  
  doc.save('document.pdf');
}

3. CSS配合分页规则

给易跨页元素添加CSS属性，辅助html2canvas识别分页逻辑（注意部分属性需配合JS调整才能生效）：

img, table {
  page-break-inside: avoid;
  break-inside: avoid;
}

.print-div {
  width: 210mm; /* A4宽度，匹配PDF页面 */
  margin: 0 auto;
}

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