Repeat Header in every page jsPDF

Question

I need to repeat a header on every page that I create and export to a pdf, using jsPDF. In this case, I want to repeat the div with id="id1" on every page. I am using React. The code is below

<div>
  <div id="id1" style={{height: "100px", width:"2000px", backgroundColor: "red"}}>

  </div>

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

  </div>
  <button onClick={(e) => saveDiv(e)}>Save Div</button>
</div>

If anyone could help I would appreciate it

Answer 1

If the content of your pdf is html then you can not repeat your header because then it is converting your html to pdf, it will be just a snapshot of your html and in your html if you have this header at one place then it will be shown in pdf one time. I was facing similar issue then instead of converting html to pdf I created content using table, columns, text, header and footer. Then the header and the footer will be shown in each page. Then it will be more dynamic and easy to apply changes. For header you can use header like this:

header: function() {
   return {
   // Add your header data here       
  
  };
},