Align text right using jsPDF

Question

I'm using jsPDF to create a PDF on the client side and I see there are properties to change the color, size, and font of the text, but I need to align the text to the right. So it's all aligned to a right coordinate. Kind of like text-align: right; in CSS. How would I go about doing this?

Thanks

Answer 1

As of jspdf 2.3.1, we can use

doc.text("Test", 105, 10, "center"); // center align => pageWidth / 2 

//doct.text(string , x , y, alignment);

OR

doc.text("Test", 105, 10, { align : "center" }); // center align => pageWidth / 2 

The alignment is based on x coordinate, y is the distance from top.

For example, doc.text("Test", 200, 10, "right"); will right-align the text. And doc.text("Test", 10, 10, "left"); will left-align the text.

Answer 2

2022 (Version 2.5.1)

Those that see Arabic can see some intentional errors to highlight the current syntax oddities

I have set the right margin by using aBox = width, then ANY language text placed align right will be inline.

However as a non Arabian I write wrong way round, so the upper "Right" text says R2L(false) but the R2L(true) is clearly not Hello World nor true "مرحبا بالعالم"

Answer 3

For TypeScript / Angular this can be used as a model:

import { Font, jsPDF } from 'jspdf';


                    /**
                     * PDF text alignment test
                     */
export function pdfTest() {
                    // the pdfDocCfg base object
  const pdfDocCfg: PDFdocCfg_I = {
    jsPdfHtmlOptions: {},
    jsPdfOptions:     {
      unit: 'pt'
    },
    jsPdfDocProps:    {},
    autoTableOpt:     {},
    dataRowInfo:      {},
    margins_pt:       {top:   36,  // 36 pt = 0.5 in = 1.27 cm
                      bottom: 36,
                      left:   36,
                      right:  36},
    pageHeight: 0,
    lastRowPos: 0
  }
                    // create new jsPDF API object instance
                    // that we use to generate the PDF doc.
  const docPdf: jsPDF = new jsPDF(pdfDocCfg.jsPdfOptions);

  const pageLeft: number   = 10;
  const pageWidth: number  = docPdf.internal.pageSize.width;
  const pageHorizCenter: number = pageWidth / 2;

  // docPdf.setFont('times');
  // docPdf.setFontType('normal');
  let row: number        = 20;
  let nextRowPos: number =  0;

  docPdf.text('This is centred text 1.',                 pageHorizCenter, (nextRowPos += row),  {align: 'center'});
  docPdf.text('This is centred text 2.',                 pageHorizCenter, (nextRowPos += row),  {align: 'center'});
  docPdf.text('This is right aligned text 1',            pageWidth,       (nextRowPos += row),  {align: 'right'});
  docPdf.text('This is right aligned text 2',            pageWidth,       (nextRowPos += row),  {align: 'right'});
  docPdf.text('This is left aligned text 1 - default',   pageLeft,        (nextRowPos += row));
  docPdf.text('This is left aligned text 2 - explicit',  pageLeft,        (nextRowPos += row),  {align: 'left'});

  docPdf.save();

}

Answer 4

I am using jspdf: "^1.3.5" and jspdf-autotable: "^2.3.2"

I faced trouble as there is sync between the jspdf documentation and jspdf plugins source js file. In my case, since nothing was working following the documentation, I did enter code herereverse engineering and following the source file, here is my working code:

    doc.autoTable(
          ['Date', 'Particulars', 'Company','Quantity', 'Rate', 'Debit', 'Credit', 'Balance']
        , 
        jsonArray ,
        {
          styles: {
            fontSize: 10
          },
          startY: 15,
          columnStyles: [
            {halign: "left" },
            {halign: "left" },
            {halign: "left" },
            {halign: "center" },
            {halign: "right" },
            {halign: "right" },
            {halign: "right" },
            {halign: "right" },
           
          ]
        }
        ) 

I had to set the style for each column.

Answer 5

As of Mar 2021, you can't simply pass the alignment as a string, you need to pass a TextOptionsLight object.

doc.text('My Text', 190, 20, {
    align: 'right',
});

Answer 6

I have written an extension to jsPDF a while back that allows text aligning (and by default aligns top-left, instead of the random stuff jsPDF' .text function does).

The code is written in TypeScript (to add some type annotations), which should give you a pretty clear idea what parameters there are.

Update: These snippets have been corrected to work in the latest version as of 2019/07/17, thanks to Kaddath (see their comment/this post's edit history for details).

var splitRegex = /\r\n|\r|\n/g;
jsPDF.API.textEx = function (text: any, x: number, y: number, hAlign?: string, vAlign?: string) {
    var fontSize = this.internal.getFontSize()
        / this.internal.scaleFactor;

    // As defined in jsPDF source code
    var lineHeightProportion = 1.15;

    var splittedText: string[];
    var lineCount: number = 1;
    if (vAlign === 'middle' || vAlign === 'bottom'
        || hAlign === 'center' || hAlign === 'right') {

        splittedText = typeof text === 'string'
        ? text.split(splitRegex)
        : text;

        lineCount = splittedText.length || 1;
    }

    // Align the top
    y += fontSize * (2 - lineHeightProportion);

    if (vAlign === 'middle') y -= (lineCount / 2) * fontSize;
    else if (vAlign === 'bottom') y -= lineCount * fontSize;


    if (hAlign === 'center'
        || hAlign === 'right') {

        var alignSize = fontSize;
        if (hAlign === 'center') alignSize *= 0.5;

        if (lineCount > 1) {
            for (var iLine = 0; iLine < splittedText.length; iLine++) {
                this.text(splittedText[iLine],
                    x - this.getStringUnitWidth(splittedText[iLine]) * alignSize,
                    y);
                y += fontSize * lineHeightProportion;
            }
            return this;
        }
        x -= this.getStringUnitWidth(text) * alignSize;
    }

    this.text(text, x, y);
    return this;
};

Plain javascript:

var splitRegex = /\r\n|\r|\n/g;
jsPDF.API.textEx = function (text, x, y, hAlign, vAlign) {
    var fontSize = this.internal.getFontSize() / this.internal.scaleFactor;

    // As defined in jsPDF source code
    var lineHeightProportion = 1.15;

    var splittedText = null;
    var lineCount = 1;
    if (vAlign === 'middle' || vAlign === 'bottom' || hAlign === 'center' || hAlign === 'right') {
        splittedText = typeof text === 'string' ? text.split(splitRegex) : text;

        lineCount = splittedText.length || 1;
    }

    // Align the top
    y += fontSize * (2 - lineHeightProportion);

    if (vAlign === 'middle')
        y -= (lineCount / 2) * fontSize;
    else if (vAlign === 'bottom')
        y -= lineCount * fontSize;

    if (hAlign === 'center' || hAlign === 'right') {
        var alignSize = fontSize;
        if (hAlign === 'center')
            alignSize *= 0.5;

        if (lineCount > 1) {
            for (var iLine = 0; iLine < splittedText.length; iLine++) {
                this.text(splittedText[iLine], x - this.getStringUnitWidth(splittedText[iLine]) * alignSize, y);
                y += fontSize * lineHeightProportion;
            }
            return this;
        }
        x -= this.getStringUnitWidth(text) * alignSize;
    }

    this.text(text, x, y);
    return this;
};

Using it is as simple as:

pdf.textEx('Example text', xPosition, yPosition, 'right', 'middle');

Prints a text of which the middle right is at (xPosition, yPosition).