Jquery 如何将html页面拆分为A4纸大小的页面？

我每次都试图打印一份包含动态生成内容的报告。使用CSS进行页面分割无法正确处理动态内容。因此，我正在寻找一种解决方案，以帮助动态内容在A4大小内正确放置。如果超过了，应该像MSWord一样进入下一页

我试过JSPDF和CSS，但它们不能正常工作，内容重叠的问题出现了

  snipMe(element) {
    this.time++;
    this.page_count++;
    if (this.page_count > this.max_pages) {
      return;
    }

    let long = $(element)[0].scrollHeight - Math.ceil($(element).innerHeight());

    const ScrollHeight = $(element)[0].scrollHeight;
    const InnerHeight = Math.ceil($(element).innerHeight());
    const HiddenContentHeight = $(element)[0].scrollHeight - Math.ceil($(element).innerHeight());
    const children = $(element).children().toArray();
    const removed = [];
    while (long > 0 && children.length > 0) {
      const child = children.pop();
      $(child).detach();
      removed.unshift(child);
      long = $(element)[0].scrollHeight - Math.ceil($(element).innerHeight());
    }

    if (removed.length > 0) {
      const a4 = $('<div class= "cls' + removed.length + ' A4"></div>');
      const mycontent = '<pre>hello im a pre tag</pre>';
      // a4.append(mycontent);
      a4.append(removed);
      a4.css({
        'background': 'white',
        'width': '21cm',
        'height': '29.7cm',
        'display': 'block',
        'margin': '0 auto',
        'padding': '10px 25px',
        'margin-bottom': '0.5cm',
        'box-shadow': '0 0 0.5cm rgba(0, 0, 0, 0.5)',
        // 'overflow-y': 'scroll',
        'box-sizing': 'border - box',
        'font-size': '12pt'
      });
      $(element).after(a4);
      this.snipMe(a4[0]);
    }
  }

snipMe（元素）{
这个.time++；
这个.page_count++；
如果（this.page\u count>this.max\u pages）{
返回；
}
let long=$（element）[0].scrollHeight-Math.ceil（$（element.innerHeight（））；
常量ScrollHeight=$（元素）[0]。ScrollHeight；
const InnerHeight=Math.ceil（$（element.InnerHeight（））；
const HiddenContentHeight=$（元素）[0]。scrollHeight-Math.ceil（$（元素）.innerHeight（））；
常量children=$（元素）.children（）.toArray（）；
移除常数=[]；
while（long>0&&children.length>0）{
const child=children.pop（）；
$（子）.detach（）；
移除。取消移位（儿童）；
long=$（元素）[0].scrollHeight-Math.ceil（$（元素）.innerHeight（））；
}
如果（已删除。长度>0）{
常数a4=$（''）；
const mycontent='hello im a pre tag'；
//a4.附加（mycontent）；
a4.追加（删除）；
a4.css({
“背景”：“白色”，
“宽度”：“21cm”，
‘高度’：‘29.7厘米’，
“显示”：“块”，
“边距”：“0自动”，
“填充”：“10px 25px”，
“边距底部”：“0.5cm”，
“长方体阴影”：“0.5cm rgba（0,0,0,0.5）”，
//'溢出-y'：'滚动'，
“框大小”：“边框-框”，
“字体大小”：“12pt”
});
$（元素）。在（a4）之后；
这是snipMe（a4[0]）；
}
}

我现在正在使用上面的jquery代码