使用 jsPDF 对齐文本

Question

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

谢谢

Answer 1

不久前我写了一个 jsPDF 扩展，它允许文本对齐（默认情况下对齐左上角，而不是 jsPDF 的 .text 函数所做的随机内容）。

代码是用 TypeScript 写的（添加一些类型注释），这应该让你很清楚有哪些参数。

更新： 由于 Kaddath（参见他们的 comment/this post的详细编辑历史）。

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

截至 2021 年 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',
});

Answer 4

我正在使用 jspdf: "^1.3.5" 和 jspdf-autotable: "^2.3.2"

我遇到了麻烦，因为 jspdf 文档和 jspdf 插件源 js 文件之间存在同步。就我而言，由于按照文档没有任何效果，我进行了 enter code here 逆向工程并按照源文件进行操作，这是我的工作代码：

    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" },
           
          ]
        }
        )

我必须为每一列设置样式。

使用 jsPDF 对齐文本

Align text right using jsPDF

javascript

jspdf