使用 jsPDF 右对齐文本答案

【问题标题】：Align text right using jsPDF使用 jsPDF 右对齐文本
【发布时间】：2021-11-18 20:14:47
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

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

代码是用 TypeScript 编写的（添加一些类型注释），这应该可以让您非常清楚地了解有哪些参数。

更新：感谢 Kaddath，这些 sn-ps 已更正，可在 2019/07/17 的最新版本中运行（有关详细信息，请参阅他们的评论/这篇文章的编辑历史记录）。

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) 的文本。

【讨论】：

好答案我应用它并且它的工作正常......好 Aidiakapi 先生
干得好！现在在jspdf-autotable 插件中使用它。
酷，看起来不错的插件，我实际上也用这段代码来创建表格。
希望看到一个 jsfiddle 示例？？
太好了！但是，我发现了一点不一致：当多行文本居中或右对齐时，行之间没有添加足够的高度，因此文本比常规文本更紧凑（左对齐）。它应该是 y += fontSize * lineHeightProportion; 而不是 y += fontSize;

【解决方案2】：

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

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

【讨论】：

截至 [日期] 有点奇怪......你为什么不引用一个版本呢？无论如何，尝试了它，它对我不起作用。没有错误，只是对齐不好。

【解决方案3】：

截至 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"); 将左对齐文本。

【讨论】：

【解决方案4】：

我正在使用 jspdf：“^1.3.5”和 jspdf-autotable：“^2.3.2”

我遇到了麻烦，因为 jspdf 文档和 jspdf 插件源 js 文件之间存在同步。就我而言，由于遵循文档没有任何工作，我做了enter code herereverse 工程并遵循源文件，这是我的工作代码：

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

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

【讨论】：