简体   繁体   English

如何在JSPDF中为pdf.cell应用css

[英]How to apply css for pdf.cell in JSPDF

I have a requirement Where I need to generate a PDF file which consists of table.我有一个要求,我需要生成一个包含表格的 PDF 文件。 I am able to generate PDF.我能够生成PDF。 But, I want to apply styles to border.但是,我想将样式应用于边框。 Currently the border is showing black in color.目前边框显示为黑色。 I want to change the color to white.我想将颜色更改为白色。 Ho do I do that??我怎么做??

Here is my js function which is called when "Export to PDF" link is clicked.这是我的 js 函数,它在单击“导出到 PDF”链接时调用。

For tableId I am passing my table name.对于tableId我正在传递我的表名。

My table is as shown:我的表如图所示:

在此处输入图片说明

My PDF Generated is as shown:我生成的PDF如图所示:

在此处输入图片说明

I want to change the border color of my generate PDF to "grey".我想将生成的 PDF 的边框颜色更改为“灰色”。 How am I supposed to do that?我该怎么做? Can anyone please help me with this?任何人都可以帮我解决这个问题吗?

Before calling cell() method you have to set drawColor property.在调用cell()方法之前,您必须设置drawColor属性。

To set draw color use setDrawColor method要设置绘制颜色使用setDrawColor方法

setDrawColor(R,G,B);

More details about this method are here in the API documentation. API 文档中提供了有关此方法的更多详细信息。 http://rawgit.com/MrRio/jsPDF/master/docs/global.html#setDrawColor http://rawgit.com/MrRio/jsPDF/master/docs/global.html#setDrawColor

The draw color can be reset to black by setting the RGB value to setDrawColor(0);可以通过将 RGB 值设置为setDrawColor(0);将绘制颜色重置为黑色setDrawColor(0);

Example:例子:

  //Set text color
  doc.setTextColor(0);
  doc.text(10, 10, 'This is a test');

  //Change text color
  doc.setTextColor("#42d254");
  //Set draw color
  doc.setDrawColor(150,150,150);
  doc.cell(40, 40, 50, 20, "cell"); //cell(x,y,w,h,text,i)

Check this fiddle for reference: https://jsfiddle.net/Purushoth/x4xo4owj/检查此小提琴以供参考: https : //jsfiddle.net/Purushoth/x4xo4owj/

Please checkout jsPDF-Autotable plugin which has lot of built-in features for custom stylinghttps://simonbengtsson.github.io/jsPDF-AutoTable/#header-footer .请查看jsPDF-Autotable插件,该插件具有许多用于自定义样式的内置功能https://simonbengtsson.github.io/jsPDF-AutoTable/#header-footer

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM