Is there any way to center text with jsPDF?

Question

I\'m trying to create a simple pdf doc using javascript. I found jsPDF but I don\'t figure out how to center text. Is it possible?

Answer 1

Do this:

First get the page width, get half the page width and use it as the x value, use y value of your choice and pass center as the third param to center your text. Read more from documentation

let doc = new jsPDF();
let pageWidth = doc.internal.pageSize.getWidth();
doc.text("My centered text",pageWidth / 2, 20, 'center');

Answer 2

Yes it's possible. You could write a jsPDF plugin method to use.

One quick example is this:

    (function(API){
    API.myText = function(txt, options, x, y) {
        options = options ||{};
        /* Use the options align property to specify desired text alignment
         * Param x will be ignored if desired text alignment is 'center'.
         * Usage of options can easily extend the function to apply different text 
         * styles and sizes 
        */
        if( options.align == "center" ){
            // Get current font size
            var fontSize = this.internal.getFontSize();

            // Get page width
            var pageWidth = this.internal.pageSize.width;

            // Get the actual text's width
            /* You multiply the unit width of your string by your font size and divide
             * by the internal scale factor. The division is necessary
             * for the case where you use units other than 'pt' in the constructor
             * of jsPDF.
            */
            txtWidth = this.getStringUnitWidth(txt)*fontSize/this.internal.scaleFactor;

            // Calculate text's x coordinate
            x = ( pageWidth - txtWidth ) / 2;
        }

        // Draw text at x,y
        this.text(txt,x,y);
    }
})(jsPDF.API);

And you use it like this

var doc = new jsPDF('p','in');
doc.text("Left aligned text",0.5,0.5);
doc.myText("Centered text",{align: "center"},0,1);

Answer 3

WootWoot, just in case you need more layout options, you could also take a look at my pdfmake library

It supports:

• text alignments, lists, margins
• styling (with style inheritance)
• tables with auto/fixed/star sized columns, auto-repeated headers, col/row spans
• page headers and footers
• font embedding, and a couple of other options

It works on client-side (pure JS) or server-side (an npm module)

Take a look at the playground to see what's possible

Good luck

Answer 4

Based on @Tsilis answer I have snippet out a plugin here https://gist.github.com/Purush0th/7fe8665bbb04482a0d80 which can align the text left, right and center in the given text container width.

(function (api, $) {
'use strict';
api.writeText = function (x, y, text, options) {
    options = options || {};

    var defaults = {
        align: 'left',
        width: this.internal.pageSize.width
    }

    var settings = $.extend({}, defaults, options);

    // Get current font size
    var fontSize = this.internal.getFontSize();

    // Get the actual text's width
    /* You multiply the unit width of your string by your font size and divide
     * by the internal scale factor. The division is necessary
     * for the case where you use units other than 'pt' in the constructor
     * of jsPDF.
    */
    var txtWidth = this.getStringUnitWidth(text) * fontSize / this.internal.scaleFactor;

    if (settings.align === 'center')
        x += (settings.width - txtWidth) / 2;
    else if (settings.align === 'right')
        x += (settings.width - txtWidth);

    //default is 'left' alignment
    this.text(text, x, y);

}
})(jsPDF.API, jQuery);

Usage

var doc = new jsPDF('p', 'pt', 'a4');
//Alignment based on page width
doc.writeText(0, 40 ,'align - center ', { align: 'center' });
doc.writeText(0, 80 ,'align - right ', { align: 'right' });
//Alignment based on text container width
doc.writeText(0, 120 ,'align - center : inside container',{align:'center',width:100});

Answer 5

I have found that the current version of jsPdf supports a parameter 'align' with the function signature like this:

API.text = function (text, x, y, flags, angle, align)

So the following should give you a center-aligned text:

doc.text('The text', doc.internal.pageSize.width, 50, null, null, 'center');

However, at the current point in time, an error is thrown in the library when strict mode is on because a 'var' is missing. There is an issue and pull request for it, but the fix hasn't made it in: https://github.com/MrRio/jsPDF/issues/575

Whoever is looking for this, one day, you might be able to use this to make it easier to center text.

Answer 6

maybe... just for easy way, you may read this jsPdf text api doc

doc.text(text, x, y, optionsopt, transform) 

where optionspot is a objet, so you can do this

{align:"center"}

i.e:

doc.text("Hello Sun", doc.internal.pageSize.getWidth()/2, 10, { align: "center" })

where: doc.internal.pageSize.getWidth() is the page width for pdf sheet