使用jQuery .html()无法获取父div完整内容，求替代方案（jspdf场景）

我之前也碰到过一模一样的情况——当父容器下的子元素数量多、内容量大时，jQuery的.html()偶尔会出现内容截取不全的问题，大概率是它内部处理大量DOM节点时存在隐性限制，或者部分动态加载的子元素还没完全渲染就被调用了。针对你的需求，这里有几个靠谱的解决思路：

1. 改用原生JavaScript的innerHTML获取完整内容 #

原生DOM方法往往比封装后的jQuery方法更稳定，直接调用innerHTML能拿到父div的完整内容：

const parentDiv = document.getElementById('parentDiv');
const fullHtmlContent = parentDiv.innerHTML;
// 后续将fullHtmlContent传入jspdf处理即可

如果习惯用jQuery，也可以通过获取原生DOM元素来调用innerHTML：

const fullHtmlContent = $('#parentDiv')[0].innerHTML;

2. 遍历所有子元素手动拼接内容 #

要是上面的方法还是有问题，你可以直接遍历父div下的所有节点，逐个获取它们的内容并拼接，确保不会遗漏任何子元素：

let fullContent = '';
$('#parentDiv').contents().each(function() {
  // 分别处理元素节点和文本节点
  fullContent += this.nodeType === 1 ? $(this).prop('outerHTML') : this.textContent;
});

3. 更适合PDF生成的最优方案：html2canvas + jspdf #

其实你完全不需要先获取HTML字符串再生成PDF，直接把DOM元素转成Canvas再生成PDF，既能解决内容不全的问题，还能完美还原页面样式。步骤如下：

先确保引入了html2canvas和jspdf库，然后用以下代码实现导出：

async function exportToPDF() {
  const parentElement = document.getElementById('parentDiv');
  
  // 将DOM转为Canvas，提高scale值可避免PDF模糊
  const canvas = await html2canvas(parentElement, {
    scale: 2,
    logging: false,
    useCORS: true // 页面有跨域图片时需要开启这个选项
  });

  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4纸宽度（毫米）
  const pageHeight = 297;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let remainingHeight = imgHeight;
  let position = 0;

  // 添加第一页内容
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
  remainingHeight -= pageHeight;

  // 内容超过一页时自动分页
  while (remainingHeight >= 0) {
    position = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
    remainingHeight -= pageHeight;
  }

  // 保存PDF文件
  pdf.save('my-document.pdf');
}

// 调用函数生成PDF
exportToPDF();

额外注意事项 #

如果你的子div是通过AJAX或其他方式动态加载的，一定要确保调用获取内容/生成PDF的方法时，所有28个子元素都已经完全渲染到DOM中。可以把代码放在$(document).ready()里，或者用MutationObserver监听父div的子元素变化，确认所有子元素加载完成后再执行操作。

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