HTML autoPaging by div

Question

HTML autoPaging by div

tlw-ryan opened this issue a year ago · 10 comments

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.

<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>

Answer 1 · 2024-09-24T16:25:55.000Z

lets do it 🚀

Answer 2 · 2024-09-29T01:56:44.000Z

You can add a class identifier to the div tag to determine where to addPage when manually paging

Answer 3 · 2024-09-29T20:45:07.000Z

You can add a class identifier to the div tag to determine where to addPage when manually paging

I had no luck getting manual paging to work well with the jspdf html function and html2canvas. The idea here is to avoid needing manual paging with html by providing a more robust "autoPaging" feature that allows more granular control over what elements get pushed to the next page.

Answer 4 · 2024-10-08T13:36:29.000Z

Is the issue is still open ? , I would love to work on this .

Answer 5 · 2024-10-08T21:10:15.000Z

Is the issue is still open ? , I would love to work on this .

@sanjogbhalla16 Still an issue for us. A resolution would be much appreciated!

Answer 6 · 2024-10-09T02:17:38.000Z

Hi @tlw-ryan , Please assign this task to me , I'll put work into this , thank you.

Answer 7 · 2024-10-18T14:41:17.000Z

Hey @tlw-ryan ! I would like to contribute in this. Can you assign it to me if its still open ?
Thank you!

Answer 8 · 2024-10-21T21:14:33.000Z

@sanjogbhalla16 @Ruffzi069 It doesnt look like I have permission to assign the issue sorry

Answer 9 · 2025-01-20T02:01:06.000Z

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

Answer 10 · 2025-01-21T17:35:25.000Z

Facing same issue, Any luck ?