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

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

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

Answer 3

截至 2021 年 1 月，我们可以使用

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

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

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

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

使用jsPDF右对齐文本

3 个答案: