I am trying to add a spacing between page breaks in my HTML table to also allow space for a page number at the bottom of the page. I've illustrated what I have right now and what I would like to have. Is this possible with html2pdf library?

Here's my code:

function download_pdf() {
  var element = document.getElementById("invoice_body");
  var document_name = document.getElementById("txtFileName").value;
  var opt = {
    margin: [0, -0.1, 0, 0],
    filename: document_name + ".pdf",
    image: { type: "jpeg", quality: 1 },
    pagebreak: { avoid: "tr", mode: "css", before: "#nextpage1" },
    html2canvas: { scale: 4, useCORS: true, dpi: 192, letterRendering: true },
    jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
  };

  html2pdf().set(opt).from(element).save();
}

What should I change in my code to support some spacing before and after page break + include page number?

I am trying to add a spacing between page breaks in my HTML table to also allow space for a page number at the bottom of the page. I've illustrated what I have right now and what I would like to have. Is this possible with html2pdf library?

Here's my code:

function download_pdf() {
  var element = document.getElementById("invoice_body");
  var document_name = document.getElementById("txtFileName").value;
  var opt = {
    margin: [0, -0.1, 0, 0],
    filename: document_name + ".pdf",
    image: { type: "jpeg", quality: 1 },
    pagebreak: { avoid: "tr", mode: "css", before: "#nextpage1" },
    html2canvas: { scale: 4, useCORS: true, dpi: 192, letterRendering: true },
    jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
  };

  html2pdf().set(opt).from(element).save();
}

What should I change in my code to support some spacing before and after page break + include page number?

• javascript
• html2pdf

1 Answer 1

I think you're on the right track, you can use pageBreak.before and pageBreak.after options to include spacing before and after your page breaks.

You can also use the jsPDF.putTotalPages() method to include a page number at the bottom of your pages.

I'm not sure of the actual changes you will need to make for your instance but here is an example with the above options/method included.

Example:

function download_pdf() {
  var element = document.getElementById("invoice_body");
  var document_name = document.getElementById("txtFileName").value;
  var opt = {
    margin: [0, -0.1, 0, 0],
    filename: document_name + ".pdf",
    image: { type: "jpeg", quality: 1 },
    // Added after option to add spacing after page break
    pagebreak: { avoid: "tr", mode: "css", before: "#nextpage1", after: "1cm" },
    html2canvas: { scale: 4, useCORS: true, dpi: 192, letterRendering: true },
    // Added putTotalPages option to add page number
    jsPDF: { unit: "in", format: "a4", orientation: "portrait", putTotalPages: true },
  };

  html2pdf().set(opt).from(element).save();
}

More info in the jsPDF docs.