如何在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 中必须按顺序编写代码，然后先绘制 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);