logo标签列表

如何使用jspdf将文本对齐到中心

jspdf
20

如何使用jsPDF将文本居中对齐。

var doc = new jsPDF();
doc.text(40, 250, 'Hi How are you');
10个回答
44
如果您正在使用最新版本（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);
在1.3.4版本中，使用“'center'”的第一种方法似乎无法正常工作。 - Devnsyde
@Blindsyde 我现在无法检查此版本的功能，但从代码看，签名仍然是相同的。九月份有一个改变旨在解决对齐问题，也许是您使用的查看器引起了问题。您尝试过其他PDF程序吗？ - GrouchyPanda
@GrouchyPanda 在放弃之前，我尝试了几种方法，最终采用了这里详细介绍的不同方法：https://dev59.com/2l4c5IYBdhLWcg3wFm44 - Devnsyde
适用于Jspdf@1.4.1。 - Evgenia Karunus
用 { align: 'center' } 替换 'center' - GDBxNS
18

Angular 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");
4

上述答案对我没有用，最终我采取了以下方法来居中文本

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

这个有效:

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

第一个答案是正确的。但我执行了稍微不同的任务。我想让我的文本居中对齐或页面对齐，为此编写了以下代码：

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

我得到的结果如下：

Image of results

1

这个方法有点用，但不是很精确，如果您知道原因，请告诉我。

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

为此，我使用了我的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纸：210毫米*297毫米。

只需在创建jsPDF时设置unit: 'mm'即可。

这实际上是正确的方法。但是，如果您使用的是A4 210mm * 297mm纸张，请注意var textDimensions = pdf.getTextDimensions('MyText');返回px而不是mm，因此需要乘以0.2645833333进行转换。这就是为什么它没有像您提到的那样精确，因为您错过了这个转换。否则，回答非常好。 - vin shaba
我在文档中找不到有关textDimensions和getTextWidth使用的单位信息。根据@vinshaba的建议，我尝试了getTextWidth * 1.21，结果有效。 - fearis
1

enter image description here

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");
1

这对我有用。

 pdf.text(`For Species: ${specieName}`, 300, finalY + 50, **{ align: 'center' }**);
任何想法如何为文本添加宽度？ - Naren Verma
@NarenVerma y pdf.text('在这里输入您的文本', x, y, optionsObject} 其中， x是文本开始绘制的水平点， y是文本开始绘制的垂直点。因此，您不能指定宽度，只能指定起始点X，宽度将自动确定。 - navinrangar
好的。实际上，我有一段文字是水平排列在一行中显示的。我需要将其分行。 - Naren Verma
有没有办法让specieName加粗，而其余部分保持正常？ - Santosh
0
2022年：我发现JSPDF有一些错误。花了一段时间才弄清楚如何为PHP应用程序安装广告中声称的“在浏览器中运行”的实现，而不是JS前端框架。有一行代码是必需的：window.jsPDF = window.jspdf.jsPDF;，但在文档中没有提到，我不得不逐个下载示例找到它。现在我发现居中文本函数不起作用。在两个不同的本地环境和一个JSFiddle上，在多个浏览器上实施align:center选项时，会将文本发送到页面的左侧。虽然上述解决方案有效，但如果文本超过一行，它就会失效，这恰好是另一个开箱即用的错误-文本超出文档而不是换行，也没有换行选项。因此，经过所有这些小时后，我的运气不好，我将不得不走另一条路线。插件未得到维护，这应在文档中说明。建议不要浪费您的时间。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接