Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML autoPaging by div #3766

Open
tlw-ryan opened this issue Sep 16, 2024 · 6 comments
Open

HTML autoPaging by div #3766

tlw-ryan opened this issue Sep 16, 2024 · 6 comments

Comments

@tlw-ryan
Copy link

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>
@akhileshverma92
Copy link

lets do it 🚀

@AutismPatient
Copy link

AutismPatient commented Sep 29, 2024 •
edited
Loading

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

@tlw-ryan
Copy link
Author

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.

@sanjogbhalla16
Copy link

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

@tlw-ryan
Copy link
Author

tlw-ryan commented Oct 8, 2024

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!

@sanjogbhalla16
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@AutismPatient @sanjogbhalla16 @akhileshverma92 @tlw-ryan