如何在jspdf中将黑色文本放在灰色矩形的顶部

Question

我正在使用 jspdf 将我的 html 页面转换为 PDF。到目前为止，我发现 HTML 中的样式不适用于 PDF 文档。所以我使用 doc.text 和 doc.rect.

我需要矩形顶部的文本，但矩形似乎总是在顶部并且覆盖了文本。我该如何解决？

这是我试过的：

var doc = new jsPDF();    

doc.setFontSize(17);     

doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')

Answer 1

在绘制文本之前先绘制矩形

var doc = new jsPDF();

doc.setFontSize(17);

doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');

doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

Answer 2

在jsPDF中一定要按顺序写代码，先画矩形，最后写文字。

var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);

Answer 3

您可以使用getTextWidth方法为矩形设置适当的宽度，但是在获取宽度之前您必须设置字体size/type。

http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth

如何在jspdf中将黑色文本放在灰色矩形的顶部

how to put black text on top of gray rect in jspdf

javascript

jspdf