CODEWITHSUNDEEP
javascriptjqueryjspdf
sfarzoso
sfarzoso

Reputation: 1600

How to calculate the vertical height in jsPDF?

I'm using the jspdf library and I'm facing some problems in the content position, suppose I have this pdf:

var doc = new jsPDF();
doc.setFontSize(12);
doc.text("some text", 15, 14); //<- vertical height is 14

as you can see I placed the text to x = 15 and y = 14, how can I calculate the used height (y) for add the next content? eg:

 doc.addImage(someImage, 'JPEG', 15, 10, 60, 10);

as you can see I have an image that is:

but how can I know the used vertical height to add the new content? Because in the example above the image will overlay the text (y = 10).

I'm looking for a function that calculate the used height in the document, so I can know where to place the new content in the (vertical y) height.

Maybe there is another and simple solution to do this?

Thanks in advance.

Upvotes: 1

Views: 3504

Answers (2)

user2441200
user2441200

Reputation: 1

you can use this solution if you have a dynamic text (example longText).

var doc = new jsPDF();

var x = 20;
var delta = 10;
var longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

var maxLineWidth = 170;
var textLines = doc.splitTextToSize(longText, maxLineWidth);

var m =  textLines.length; // m = 9
console.log('textLines.length:'+m); 
doc.text(textLines, 10, x);

var obH = 6; //another possibility var ob = doc.getTextDimensions(longText); ob.h;

var y = x + delta +  (obH * m);
doc.setFont("courier", "normal");
doc.text("This is courier normal.", 10, y);

You can try this code in the live demo page jsPDF

Upvotes: 0

Shahzeb Khan
Shahzeb Khan

Reputation: 3642

You can use a work around for this as follows.

Crete a variable var y=14 and use this variable in your text part.

doc.text("some text", 15, y);

You can reuse the same variable in order to place image after it. or may be if you need space, you can reuse this variable as

var img_y=y+10;

doc.addImage(someImage, 'JPEG', 15, img_y, 60, 10);

Upvotes: 1

Related Questions