如何使用 jspdf 居中对齐文本

Question

How to align text center using jsPDF.

var doc = new jsPDF();
doc.text(40, 250, 'Hi How are you');

Answer 1

如果您使用的是最新版本（1.1.135），则 api 已针对文本功能进行了一些更改。它现在读作：

API.text = function(text, x, y, flags, angle, align);

如果你不需要使用标志或角度，你可以简单地使用：

var doc = new jsPDF();
doc.text('Hi How are you', 40, 250, 'center');

请记住，中心调用现在使用 x 参数作为文本字符串的中心，而不是像渲染左对齐时那样使用最左边的边框。

源链接

编辑：

或者，您可以计算适当的 x 偏移量，以便正常使用文本函数，如下所示：

var text = "Hi How are you",
    xOffset = (doc.internal.pageSize.width / 2) - (doc.getStringUnitWidth(text) * doc.internal.getFontSize() / 2); 
doc.text(text, xOffset, 250);

Answer 2

角 6. 页脚水平居中对齐

var doc = new jsPDF();
var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();


// FOOTER
let str = "Your footer text";
doc.setTextColor(100);
doc.setFontSize(10);
doc.text(str, pageWidth / 2, pageHeight  - 10, {align: 'center'});
doc.save("example.pdf");

Answer 3

以上答案对我不起作用，我最终做了以下操作使文本居中

let textX = (doc.internal.pageSize.getWidth() - doc.getTextWidth(text))/2
doc.text(text, textX, textY);

Answer 4

这有效：

var xOffset = doc.internal.pageSize.width / 2
        doc.text('hello world', xOffset, 8, {align: 'center'});

Answer 5

2022：假设您的页面宽度为 210（默认 A4）。

doc.text("This is centred text.", 105, 80, null, null, "center");

根据自述文件，这是他们的现场演示的链接：

http://raw.githack.com/MrRio/jsPDF/master/index.html

Answer 6

这有点管用，但不精确，如果你知道请告诉我为什么。

我计算我的文本的宽度，以便自己居中。

为此，我在我的 jsPDF 对象上使用了 getTextDimensions() 方法

var pdf = new jsPDF({
            orientation : 'p',
            unit: 'px',
            format: [500, 750],
            putOnlyUsedFonts:true
        });

var textDimensions = pdf.getTextDimensions('MyText');

您现在可以使用

textDimensions.w

获取文本宽度，使用

textDimensions.h

获取高度

然后用它来居中你的文字。

var textWidth = textDimensions.w;

pdf.text('MyText', (pdfWidth / 2) - (textWidth / 2), 100);

但是： 您需要知道 PDF 的宽度才能执行此操作。

我通过自己定义高度和宽度来“解决”这个问题，但是您可以轻松地在线找到常见格式的高度和宽度。

像A4：210mm*297mm.

记得在创建 jsPDF 时设置

unit: 'mm'

。

Answer 7

var doc = new jsPDF();
// set midPage for variable use
var midPage = doc.internal.pageSize.getWidth()/2

// Default is 210 mm so default midway by value is 105
doc.setFontSize(40);
doc.text("Octonyan loves jsPDF", 105, 15, null, null, "center");


// Better to use a variable "midPage" (from above)
doc.setFontSize(30);
doc.text("Centered (USA), Centred (UK)", midPage , 30, null, null, "center");

Answer 8

第一个答案是正确的。但我执行的任务略有不同。我希望我的文字成为外星人中心或页面来写以下代码：

var width = doc.internal.pageSize.getWidth();
let totalIncomePDF = "I am Usama";
doc.text(width/2, 195, totalIncomePDF, {align: 'center'});

let thresholdPDF = "I am from Pakistan";
doc.text(width/2, 245, thresholdPDF, {align: 'center'}); 

我得到的结果如下：

Answer 9

2022：我发现 JSPDF 有问题。花了一段时间才弄清楚如何为 PHP 应用程序而不是 JS 前端框架安装广告中的“在浏览器中运行”实现。文档中的任何地方都没有提到需要

window.jsPDF = window.jspdf.jsPDF;

的一行，我不得不逐个浏览下载的示例才能找到它。现在我发现中心文本功能不起作用。在 2 个不同的本地环境和一个 JSFiddle 中，在多个浏览器上，当实现 align:center 选项时，它会将文本发送到页面左侧。虽然上述解决方案有效，但如果文本长于一行，它就会崩溃，顺便说一句，这是另一个开箱即用的错误 - 文本用完文档而不是换行，并且没有换行选项。所以，在所有这些时间之后，我似乎运气不好，我将不得不走另一条路。插件未维护，应在文档中注明。建议不要浪费你的时间。