How to add page breaks with spacing and page numbers in HTML to PDF conversion?

Seeking assistance regarding adding spacing between page breaks within an HTML table to accommodate a page number at the bottom of each page. Below, I have depicted my current setup and what I aim to achieve. Is it feasible with the html2pdf library?

https://i.sstatic.net/UOOah.png

Review of 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();
}

Any suggestions on modifying the code to introduce spacing both before and after page breaks, as well as integrating page numbers?

javascripthtml2pdf

Answer №1

It seems like you're heading in the right direction. Utilizing the pageBreak.before and pageBreak.after options can help you add spacing before and after your page breaks.

Another useful tool is the jsPDF.putTotalPages() method, which allows you to include page numbers at the bottom of your pages.

While I'm not exactly sure of the specific changes needed for your situation, below is an example incorporating the mentioned options/methods.

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 },
    // Adding after option to introduce spacing after page break
    pagebreak: { avoid: "tr", mode: "css", before: "#nextpage1", after: "1cm" },
    html2canvas: { scale: 4, useCORS: true, dpi: 192, letterRendering: true },
    // Implementing putTotalPages option to display page number
    jsPDF: { unit: "in", format: "a4", orientation: "portrait", putTotalPages: true },
  };

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

For further details, refer to the jsPDF documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a jQuery event when a different selection is made in the dropdown menu

There are 2 choices available in the dropdown menu. <select id="_fid_140" onchange="chooseRecordPicker()" > <option value="736">9000000146</option> <option value="x3recpcker#">&lt; Browse choices... &gt;</option> Upo ...

javascriptjquery

Retrieving information from a JSON source to populate a data table

Hello fellow developers... I'm currently facing an issue while trying to dynamically populate a data table with information fetched through a fetch request and stored in a Vuex instance variable. Here is the relevant code snippet: <script> impo ...

javascriptjsonvue.jsvuexv-data-table

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

My current challenge involves sending an audio blob to a specific Google Drive folder. To accomplish this, I convert the blob into a file before initiating the transfer process. However, I have encountered an error from the beginning: Error: File not fo ...

javascriptnode.jsreactjsfileblob

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

Ways to disable .animate() specifically for a particular element

I have implemented a countdown using which smoothly animates the numbers down and fades to opacity 0. Update. I have also created a demo on jsFiddle here: http://jsfiddle.net/Mw4j2/ // The .static class is added when the animation // complet ...

javascriptjqueryjquery-animatecountdown

Internet Explorer 11 is not interested in giving attention to a disabled element

I'm trying to limit text input to only one of two fields. My approach involves checking the value of a field when it loses focus, and then disabling the other field if the initial one is not empty. Below is an example: HTML: <div class="contain ...

javascriptjqueryhtmlinternet-explorer-11

Selecting Elements with jQuery OR JavaScript

Question: jQuery attribute selector for multiple values I am facing a query regarding jQuery attribute selection. Here is the code snippet I have: $('input:radio[name=foo]').change(function() { blah(); }); $('input:radio[name=bar] ...

javascriptjqueryoperatorscss-selectors

Ways to execute the pdf.js node demonstrations?

I've been attempting to run the pdf.js node examples, specifically getinfo.js. Unfortunately, I encountered an issue that resulted in the following error: C:\Repositories\pdf.js>node getinfo.js node:internal/modules/cjs/loader:1080 thro ...

javascriptnode.jsnpmpdf.jspdfjs-dist

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: https://i.sstatic.net/Wa4mo.jpg with this new link: https://i.sstatic.net/hqVuQ.jpg without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restrictio ...

javascriptjqueryhtmlcss

Difficulty in displaying a set of information through JavaScript

Greetings, I have created a tooltip that can be found at this link: http://jsfiddle.net/QBDGB/83/. In this tooltip, I have defined two "functions" like so: function mousemove1(d) { div .text("data 1: " + d.value + " at " + formatTime(new Date( ...

javascript

Navigating through each element of an array individually by using the onClick function in React

I'm currently working on a project that involves creating a button to cycle through different themes when pressed. The goal is for the button to display each theme in sequence and loop back to the beginning after reaching the last one. I've imple ...

javascripthtmlcssreactjsnext.js

What is the best way to initiate a re-render after updating state within useEffect()?

I'm currently strategizing the structure of my code using React hooks in the following manner: Implementing a state variable to indicate whether my app is loading results or not The loading state turns to true when useEffect() executes to retrieve da ...

javascriptreactjs

Loading SVG images in advance

I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...

javascriptphphtmlcsssvg

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

I have encountered an issue where I am attempting to pass 3 parameters (2 types and one string) but they are showing up as null on the server side. Below is my service: const httpOptions = { headers: new HttpHeaders({ 'Content-Type&ap ...

javascriptc#angulartypescriptpost

The optimal method for designing a select menu to ensure it works smoothly on various web browsers

Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...

javascriptjqueryhtmlcss

What is the best way to save the previous state data into a variable so that in case of an error during an API call, we can easily undo the changes that were made

I'm dealing with a toggle button that changes data upon clicking and then triggers an API call to update the databases. However, in case the API returns an error, I want to revert the changes made in the UI. Can anyone guide me on how to achieve this? ...

javascriptreactjsnext.js

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

I'm currently in the process of developing an app that makes use of electron, react, redux, and several other technologies. At the moment, I have included electron, react, electron-compile, and babel in the project. Redux is installed but has not been ...

javascriptreactjselectron

What is the best way to construct an AJAX call that includes two sets of POST data?

I'm currently working on a project that involves sending WebGL frames/screenshots to a server for saving to the hard drive and later merging them into a video file. I came across this helpful resource: Exporting video from WebGL Without delving too m ...

javascriptajax

List of nested HTML tags in Javascript

I have been tasked with creating a specific HTML structure: <div id="dcontent"> <ul class="thm"> <li><a href="#"><img src="img/theme1.jpg" id="t1" border="none"/></a></li> <li><a href= ...

javascriptjqueryhtml

What is the process for isolating characters from a variable?

Is there a way to extract the first character up to 1 character after the decimal point? I am receiving data from an API {POWER : 1343.45} {POWER : 15623.34577} {POWER : 123.434} I only require 123.4 from 123.45, 15623.3 from 15623.34577, etc. How can I ...

javascriptnext.js