question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incorrect headerStyles with custom fonts in jspdf 1.4.0

See original GitHub issue

Custom fonts support was added into jspdf 1.4.0. Here is the code from their example:

const doc = new jsPDF('p', 'pt');
const PTSans = "AAEAAAAUAQAAB..."; 
// according to jspdf, PTSans must be base64 font, full string is on jsPDF/examples/js/basic.js
doc.addFileToVFS("PTSans.ttf", PTSans);

doc.addFont('PTSans.ttf', 'PTSans', 'normal');

Now let’s try to apply this custom font to table body and table headers:

doc.autoTable(columns, rows, {
...
    styles: {
        fontSize: 6,
        font: 'PTSans'
    },
    headerStyles: {
        fontSize: 6,
        font: 'PTSans'
    }
...
});

Custom font from “styles” is correctly applied to table body, but not applied for headers through “headerStyles”.

Here is another issue about custom fonts: https://github.com/simonbengtsson/jsPDF-AutoTable/issues/357 , but this is different.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
alexbazilevcommented, Jun 10, 2018

My mistake 😃 jspdf-autotable is awesome!

0reactions
FastLogic1commented, Nov 24, 2020

i want to change the auto table header color any one plz help me

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't add font for jsPDF autotable header - Stack Overflow
I am using jspdf autotable in order to get special characters in the exported PDF files and I used a custom font from...
Read more >
How to Use Custom Fonts with jsPDF - Devlin Peck
Let's get started! Adding Custom Fonts to jsPDF. To use a custom font in your PDF file, you need a .ttf version of...
Read more >
jspdf-customfonts - npm Package Health Analysis - Snyk
JsPDF is an open source that loads JavaScript in an HTML5 environment and creates a pdf document. The current version does not support...
Read more >
前端PDF 打印工具jsPDF 打印中文时使用思源字体[解决中文乱码]
let conf = { type: 'pdf', jspdf: { orientation: 'landscape', // 'portrait' or 'landscape' autotable: { styles: { font: 'SourceHanSansCN-Normal', ...
Read more >
Research Artefact: A Large-Scale Study of React-Related ...
Id PostTypeId AcceptedAnswerId OwnerUserId AnswerCount CommentCount Fa... 27279488 1 29040342 674474 3 5 0 29314839 1 29437736 2802074 2 2 3 30459180 1 30459458 745952 1...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found