javascript 使用 jsPDF 右对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28327510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align text right using jsPDF
提问by Avovk
I'm using jsPDFto create a PDF on the client side and I see there are properties to change the color, size, and font of the text, but I need to align the text to the right. So it's all aligned to a right coordinate. Kind of like text-align: right; in CSS. How would I go about doing this?
我正在使用jsPDF在客户端创建一个 PDF，我看到有一些属性可以更改文本的颜色、大小和字体，但我需要将文本向右对齐。所以它都与正确的坐标对齐。有点像 text-align: right; 在 CSS 中。我该怎么做呢？
Thanks
谢谢
回答by Aidiakapi
I have written an extension to jsPDF a while back that allows text aligning (and by default aligns top-left, instead of the random stuff jsPDF' .text function does).
不久前，我为 jsPDF 编写了一个扩展，它允许文本对齐（默认情况下对齐左上角，而不是 jsPDF' .text 函数所做的随机内容）。
The code is written in TypeScript (to add some type annotations), which should give you a pretty clear idea what parameters there are.
代码是用 TypeScript 编写的（添加一些类型注释），这应该能让你很清楚地知道有哪些参数。
Update:These snippets have been corrected to work in the latest version as of 2019/07/17, thanks to Kaddath (see their comment/this post's edit history for details).
更新：感谢 Kaddath（有关详细信息，请参阅他们的评论/这篇文章的编辑历史记录），这些片段已更正，可在 2019 年 7 月 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;
};
Plain javascript:
普通的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;
};
Using it is as simple as:
使用它很简单：
pdf.textEx('Example text', xPosition, yPosition, 'right', 'middle');
Prints a text of which the middle right is at (xPosition, yPosition).
打印中右位于 (xPosition, yPosition) 的文本。
