使用jsPDF右对齐文本

Question

我正在使用jsPDF在客户端创建PDF,我看到有些属性可以更改文本的颜色,大小和字体,但我需要将文本对齐到右边.所以它都与正确的坐标对齐.有点像text-align:right; 在CSS中.我该怎么做呢？

谢谢

Answer 1

我已经写了一个jsPDF的扩展,允许文本对齐(默认情况下对齐左上角,而不是随机的东西jsPDF'.text函数).

代码是用TypeScript编写的(用于添加一些类型注释),这可以让您清楚地了解有哪些参数.

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;
};

简单的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;
};

使用它很简单:

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

打印中间右侧的文本(xPosition,yPosition).

Answer 2

从 jspdf 2.3.1 开始，我们可以使用

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 

对齐基于 x 坐标，y 是距顶部的距离。

例如，doc.text("Test", 200, 10, "right");将右对齐文本。并将doc.text("Test", 10, 10, "left");文本左对齐。

Answer 3

截至 2021 年 3 月，您不能简单地将对齐方式作为字符串传递，您需要传递一个TextOptionsLight对象。

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