Adding top and bottom padding in addHTML

Is there a way to apply margin-bottom and margin-top to multiple pages in a PDF?

I have installed the plugins jsPDF and html2canvas.

var pdf = new jsPDF('p', 'mm', [400, 455]);
var specialElementHandlers = {
  '#exportthis': function(element, renderer) {
    return true;
  }
};

margins = {
  bottom: 10,
  top: 10,
  left: 10,
  right: 10
};


pdf.addHTML(document.getElementById('exportthis'), 10, 10, {
    pagesplit: true
  },
  function(dispose) {
    var pageCount = pdf.internal.getNumberOfPages();
    for (i = 0; i < pageCount; i++) {
      pdf.setPage(i);
      pdf.text(195, 450, pdf.internal.getCurrentPageInfo().pageNumber + "/" + pageCount + "\n");
    }
    pdf.save("Report.pdf");
  }, margins);

Final Result:

Answer №1

give this a shot.

document.addHTML(document.getElementById('convertToPDF'), 10, 10, {splitPages: true, margins: {top: 10, right: 10, bottom: 10, left: 10, applyTo: 'all'}}, function () {document.save("GeneratedDocument.pdf")})

Check out the GitHub link

Take a look at the provided link for assistance

Answer №2

If you need to convert HTML and CSS to PDF, one way to do it is by utilizing the print JavaScript function. Check out this resource for more information: Convert HTML,CSS to PDF

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

Is there a way to display the items I've added to my cart when I click on it?

I have a collection of product IDs stored in local storage. I am using these IDs to populate the list of products added to the basket. Strangely, when I navigate to the basket page, the products do not appear unless I make a small code modification or re-s ...

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

I am facing an issue with a third-party library that needs to be included in my TypeScript project. The library is added to the application through a CDN path in the HTML file, and it exports a window variable that is used in the code. Unfortunately, this ...

Pass the JSON Web Token (JWT) to the API through the request header from the React

I have a burning question. I'm currently using Axios to make requests to a nodejs API, and when I include the token in the request header, the API responds with "jwt must be provided". The API specifically requires the token to be accompanied by a cus ...

Angular Directive: A Guide to Crafting Custom Filters

Can someone explain why this Angular filter works when placed outside of an Angular directive but not inside? For example, in the Plunkr link provided below, I have inserted a search filter that functions correctly outside of the Bootstrap Angular UI acco ...

Eliminate the array from the data retrieved through an http request in AngularJS

Currently, I am making an http call to retrieve data from a database. This process involves calling 6 different types individually. $scope.getAll = function() { var url = 'http://someurl/'; var allObjects = []; $sc ...

Efficiently updating several rows in MySQL database simultaneously

I'm really struggling with implementing an update statement in MySQL. Specifically, I'm working on a Node/Express back end and I need to adjust the InventoryQTY column in the BOOK table based on items in a user's shopping cart when they chec ...

How can I use jQuery to pre-select an option in two connected dropdown lists that are populated with JSON data?

I am currently dealing with two interconnected dropdown lists for country and city selection. The options are populated using JSON data, but I've encountered a couple of issues along the way. The first issue is: How can I set the default selected opti ...

Is it necessary for NPM to execute scripts labeled as dependencies during the npm i command execution?

When npm i is run, should it execute the scripts named dependencies? I've observed this behavior in the latest version of Node (v19.8.1) and I'm curious if it's a bug. To replicate this, follow these steps: mkdir test cd test npm init -y T ...

"Is there a way to switch out div2 with div1 in JavaScript or jQuery while keeping them in the exact same position as div

How can I swap two div elements in HTML by clicking a button, replacing the current div with another div at the same position? .team-intro { margin-top:38%; height:250px; background-color:#7BD2FF; /*background-image:url('images/backgrounds/down ...

Issue with MEAN stack: Unable to load localhost page following most recent git pull "Get / - - ms - -"

I am collaborating on a project with another developer and we've hit a roadblock. Both of us are new to using the MEAN stack and are facing challenges debugging an issue. My colleague made some modifications to the files, and now I'm unable to ac ...

Display webpage in a fancybox

I've searched extensively for sample cases on the internet, but unfortunately, I couldn't locate any. Is there a way to upload a fresh HTML file using fancybox? $('#Create').click(function() { $.fancybox({ What content should be in ...

Chrome showing random 0 status for $http and $ajax requests

Occasionally, an issue arises on the website where the browser starts returning status 0 for XMLHTTPRequest requests randomly. This problem applies to requests made through both the jquery ajax function and the $http resource in angularJS. Curiously, the ...

Is it possible to incorporate async await with SetState in React?

Is there a way to properly setState when needing async/await data inside it? I know it's not recommended, but I'm struggling with getting data before setting the state. Any suggestions? codesanbox: https://codesandbox.io/s/infallible-mendeleev-6 ...

Create an interactive form within an HTML table by dynamically adding text fields

$(document).ready(function() { var maxField = 10; var addButton = $('.add_button'); var wrapper = $('.field_wrapper'); var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/><a href="javascript ...

Simplify the cognitive load of the function

I'm facing a challenge with a function that has a cognitive complexity of 24, however, we have a requirement to limit it to a maximum of 15. export function parameterValueParser<T extends Structure>( structure: T ): (parameterValue: Value) =&g ...

I am encountering an issue with my ui-router resolve where it is not returning any information despite no

I am struggling to connect my MongoDb and API REST with my Angular application. It seems like there is an issue with resolution. Currently, I am following a MEAN application tutorial on this website. This snippet shows my ui-router configuration. var ap ...

Can you explain the functions of express.json() and express.urlencoded()?

I have been searching for information about the functions express.json() and express.urlencoded(), but I am struggling to find any detailed documentation. Can someone please explain what each of them does specifically? ...

What is the most efficient way to modify the variables for numerous images within a JavaScript canvas?

I'm a newcomer to using Javascript in a canvas, and coding with javascript overall. My primary goal is the following: Create numerous fireballs (images) that spawn randomly with each having a fixed y-value and random x-value. The fireballs should t ...

fill a category that allows references to come from two distinct groupings

I have an array of messages messages = await ChatMessage.find(), each message contains a replyTo field that is defined as mongoose.Schema.Types.ObjectId referencing the document ref: chattingMessage. In the database, the replyTo field stores references to ...

What is the appropriate way to assign a scope property in an angular controller when it becomes accessible?

In my code, there exists a global JavaScript object known as instance_ This object includes a property named current_ Later on, another property called dataset_ is assigned to current_ Therefore, we can access this dataset_ property by using instance_.c ...