Skip to content

Repeat Header in everypage #3252

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.

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

Closed
johnwick1986 opened this issue Sep 7, 2021 · 5 comments
Closed

Repeat Header in everypage #3252

johnwick1986 opened this issue Sep 7, 2021 · 5 comments

Comments

@johnwick1986
Copy link

johnwick1986 commented Sep 7, 2021

Hello. I am trying to repeat a header on every page that I export using the library, but I'm having difficulties doing so. In this case my code is:

` <div id="RoadmapHeader" style={{border: "solid", height: "100px", width:"2000px", backgroundColor: "green"}}>

  </div>

  <div id="RoadmapBody" style={{height: "3000px", width:"2000px", backgroundColor: "blue" }}> 

  </div>`

I want to make sure the div with id="RoadmapHeader" is repeat on every page before the content of the second is displayed. If you please could assist me I would really appreciate it

@HackbrettXXX
Copy link
Collaborator

You can do the following:

  • omit the header from your markup when calling the html function.
  • loop over all pages in the PDF afterwards and add the header to each page.

Currently, there are two issues with this approach:

  • At the moment, you can't leave space for the header at the top of each page. However, Fix margin values not working for html #2977 will add this and will be released within the next days.
  • At the moment, the html function will always render on the first page of the PDF and not the current page (see html() function always starts on first page #3204). This means, you either need to use different functions (like text) to create the headers or wait until its fixed. A pull request for that would be very appreciated ;)

@johnwick1986
Copy link
Author

Hello!

First of all, thank you for the reply.

In this case I am wrapping the div's in another div, meaning:

`

``

And then I call my function:

`const saveDiv = () => {
var doc = new jsPDF("l", "pt", "a4");

doc.html(document.getElementById("id1"), {
  callback: (pdf) => {
    console.log(pdf);
    doc.html(document.getElementById("RoadmapHeader"), { baseline: "top" });
    doc.page++;
    pdf.save("myPdf.pdf");
  },
});

};`

As such, could you give a suggestion of how to adapt the code? Sorry, but this is still pretty new to me.

Also, since I'm still pretty new to using github, could you explain how to create a proper pull request for this?

Once again, thank you so much

@HackbrettXXX
Copy link
Collaborator

HackbrettXXX commented Sep 9, 2021

Sorry, I don't have to the time to tell you how your code needs to look like. Try to find help on Stack Overflow, etc.

You can create pull requests on GitHub by creating a fork of this repository, then adding your commits (either on master or a different branch), and then creating a pull request from these commits using either the GitHub client or the website. See e.g. https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

@johnwick1986
Copy link
Author

Ok. Anyway, I would like to thank you for your answer and suggestions. I will definitely try them and also, if I am able to solve the issue I will then make a pull request.

Thank you :)

@github-actions
Copy link

github-actions bot commented Dec 9, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants