Comments (15)
If you set font family using jspdf before calling ´autoTable()´ it should use that. Font style has to be set in either renderHeaderCell
or renderCell
. Styling is simplified in the upcoming version 2.0 however so this might change.
from jspdf-autotable.
I tried doc.font("Helvetica","normal"); before doing autoTable()
But the font family did not work out for me in the tables.
from jspdf-autotable.
Then you probably need to do it in the renderCell functions. I dont change the font anywhere in the plugin however so it is somewhat strange.
from jspdf-autotable.
Sorry to bother you but Can you tell me exact code i should write to set font family and style. I do not find any similar thing done in example code and the code repository. So, I am not sure of the syntax to be used.
from jspdf-autotable.
Sure! Take a look at the default implementation of the drawHeaderCell and drawCell to specify custom font styles. In terms of font you can simply do something like this codeen:
var doc = new jsPDF('p', 'pt');
doc.setFont("courier");
doc.autoTable(columns, data);
console.log(doc.getFontList()); // Available fonts their font styles
doc.save("table.pdf");
from jspdf-autotable.
Thanks i will try that. Quick question:
Can i set a table border? I have check for doc.rect, but seems its working for individual cell. I just want border of the complete table in pdf not the cells. Anything to cater that?
from jspdf-autotable.
I suppose you could draw a line manually around the table with doc.line(). However, there is now feature in the plugin to do it. It's a good idea though and I might add that in version 2.0.
from jspdf-autotable.
Line drawing can be done but is there any direct way to understand the table height width or coordinates to draw those line around 4 sides?
from jspdf-autotable.
After calling autotable, you can call autoTableEndPosY() to get the y position of the final row. The table width is basically pageWidth minus the margins.
from jspdf-autotable.
okay cool. I guess i have managed to get the border the way i wanted by just using renderCell with the help of path-painting operators. But surely useful information given.
from jspdf-autotable.
Cool! You mind sharing that code?
from jspdf-autotable.
Sure, I have used the same piece of code in renderHeaderCell and renderCell. I believe the main purpose for this is too make cell border rectangle but eventually it work as a table border too.
//Render Table HeaderCell
var tableHeader = function (x, y, width, height, key, value, settings) {
doc.setFillColor(220, 20, 60); //red
doc.setTextColor(255, 255, 255);
doc.setFontStyle('normal');
doc.setLineWidth(0.2);
doc.rect(x, y, width, height, 'B');
doc.text(value, x + settings.padding, y+15);
};
//Render Cell
var tableDataCell = function (x, y, width, height, key, value, row, settings) {
// Alternate colors for row
if (row%2===0) {
doc.setFillColor(211, 211, 211); // Gray alternate colors
}
else
{
doc.setFillColor(255,255,255);
}
doc.setTextColor(0, 0, 0);
doc.setFontStyle('normal');
doc.setLineWidth(0.2);
doc.rect(x, y, width, height, 'B');
doc.text(value, x + settings.padding, y+15);
};
from jspdf-autotable.
I want to ask this question again as custom fonts is not working for me, I tried the following
var doc = new jsPDF('p', 'pt');
doc.setFont("roboto"); --> name of the font face from my css file i defined for google
roboto font
doc.autoTable(columns, data);
Appreciate your thoughts
from jspdf-autotable.
Hi, could you please point out that where can I change the default font in the source code? Or how can I make this plug-in support more font-families?
So far, I want to add a [check mark] or [square root] to the PDF and I've used doc.getFontList() to check if any fonts that this plug-in supports can insert the Unicode [\u221A] in the String and display this [square root] symbol in PDF file properly.
It seems no way to get that. So, I'm asking again, can I change the default font in the source code? I want to change the font-family to 'Arial'.
Thanks a lot~
from jspdf-autotable.
There is currently no support for changing font I'm jspdf. But there is a fork that works towards supporting it so you would have to use the that.
from jspdf-autotable.
Related Issues (20)
- Ensure table fits in single page regardless of end size HOT 1
- Como puedo cambiar la localizacion de la tabla en el eje x? HOT 2
- you can apply RTL and use Arabic font finally HOT 2
- Rendering html tags as cell content and formatting of cell content HOT 1
- Problem with horizontalPageBreak with colspan column header HOT 1
- Memory is not deallocating for autotable. js heap is increasing eventhough for small amount of data HOT 6
- HTML Entities or HEX Code issues for symbols HOT 5
- line breaks are not working
- Change row colors on page break HOT 1
- jspdf Auto Table, can we break the if the lines are more than 10 HOT 1
- (0 , import_jspdf_autotable.default) is not a function HOT 9
- Textfield Signature?
- 表格项合并时表格项与表头信息不对应 HOT 2
- Multitable loop doesn't align properly and creates unusual gaps or overlaps each other HOT 11
- HorizontalPageBreak page break can continue on same page if vertical space is enough HOT 6
- Cannot Read html tags HOT 1
- Merge Cell Inside the body of the table HOT 1
- Parsing HTML with tables HOT 1
- Rowspan on heading HOT 1
- Inconsistent Table Width Across Pages When Exporting Using jsPDF-AutoTable HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jspdf-autotable.