HTML autoPaging by div - Githubissues

I am having trouble with autoPaging: "text" messing up my formatting. Ideally I would like an autoPaging setting that is able to prevent whole divs from being split between pages, rather than just the text being pushed down independent of the div it is part of.

I am also open to any workaround that might be offered. I have tried get reading the height of each div and adding a spacer to push any divs that would be split to the next page, but I was never able to accurately ascertain the rendered height of the page so it never worked correctly.

CleanShot 2024-09-16 at 14 48 42@2x CleanShot 2024-09-16 at 14 51 24@2x


<html>
<head>
  <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>  
<script>

  var { jsPDF } = window.jspdf;

  var PDFCreated = false;
  var retoolModel;

  let generate = function() {

    var pdf = new jsPDF({
      orientation: "portrait",
      unit: "px",
      format: "a4"
    });

    const html = document.getElementById("template_contents")

    pdf.html(html, {
      callback: function (doc) {
        retoolModel.pdf_blob = btoa(doc.output());
        window.Retool.modelUpdate(retoolModel);
        window.Retool.triggerQuery("generate_submission_data");
        PDFCreated = true;
      },
      hotfixes: ["px_scaling"],
      autoPaging: "text",
      x: 0,
      y: 0,
      margin: [10,10,10,10],
      html2canvas:  { scale: 0.5 },
    })
  };

  window.Retool.subscribe(function(model) {
    if (!model) { return }
    if (PDFCreated) { return }

    retoolModel = model;
    const style = document.createElement("style")
    style.textContent = model.css;
    document.head.append(style);

    document.getElementById("template_contents").innerHTML = model.pdf_html;

    generate();
  });

</script>
</head>
<body>

  <!-- ... This stores the HTML content that we use to generate the PDF -->
  <div id="template_contents" style="width:850px">

  </div>
 </body>
</html>

parallax / jsPDF

HTML autoPaging by div #3766