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中必须按顺序编写代码，然后先绘制retangle并最后写下你的文本。

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方法为矩形设置适当的宽度，但是在获得宽度之前，必须先设置字体大小/类型。

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

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

3 个答案: