Font-family does not render in production after download PDF using jsPDF in ReactJs

Asked Apr 05 '21 at 08:33

Active Apr 05 '21 at 10:46

Viewed 392 times

ReactJS with jsPDF download does not render font-family.

jsPDF is working well on development but in the production version. I am facing a font-family missing issue after downloading the pdf. Showing below error in console.

Error while reading CSS rules from file:///Users/rahulshinde/Documents/hdfclife/offline-quote-fe/dist/assets/css/main.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Found some solutions online by adding the following attribute in link tag.

crossorigin="anonymous"

But it seems it required server to run code. I find this is not a good solution.

edited Apr 05 '21 at 10:46

asked Apr 05 '21 at 08:33

Rahul Shinde

1

import the font as Base64 encoded – Zahir Masoodi Apr 05 '21 at 11:27
I have Investigated further, This issue occurs due to domtoimage npm package. @ZahirMasoodi Thank you for your reply can you please share any example which will be helpful. – Rahul Shinde Apr 05 '21 at 12:03
https://stackoverflow.com/a/66024218/14047838 Maybe it will help. – Zahir Masoodi Apr 05 '21 at 12:16
I have converted DOM to image (JPEG) which is causing the problem. Not with JSPDF. – Rahul Shinde Apr 05 '21 at 12:22
Can you share the code snippet @RahulShinde, It will very much helpful. – Danielprabhakaran N Aug 26 '22 at 10:17

Font-family does not render in production after download PDF using jsPDF in ReactJs

0 Answers0