On downloading the pdf in Kannada Language in my angular application. i'm getting the following error core.js:15724 ERROR Error: Uncaught (in promise): File 'NotoSansKannada.ttf' not found in virtual file system
nagashreehr opened this issue · 14 comments
your help in this issue is much appreciated.
See documentation, how to use custom fonts: https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/
I have gone through the documentation and I followed these steps
the steps followed are:
1.In index.html add the link of the font file from the Google fonts.
2. In the package directory ./node_modules/pdfmake/ created the examples/fonts sub-directory
3. Downloaded the Noto-Sans-Kannada font file and converted it into Base64 format or we can add it directly to the fonts folder.
4.Copy the Base64 format into ./examples/fonts sub-directory
5.Executed the command node build-vfs.js "./examples/fonts
As I am using Angular in .ts file , set the pdfMake.fonts as
pdfMake.fonts = {
NotoSansKannada: {
normal: 'NotoSansKannada.ttf',
bold: 'NotoSansKannada.ttf',
italics: 'NotoSansKannada.ttf',
bolditalics: 'NotoSansKannada.ttf'
}
}
4. And defining the font in the doc-definition
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center',
font:'NotoSansKannada'
},
subheader: {
fontSize: 16,
bold: true,
font:'NotoSansKannada',
margin: [0, 10, 0, 5]
}
}
Please let me know if I have to add anything
Attach runnable example for reproduce issue.
src.zip
I have attached the source folder of the project
use npm install to install node modules and I have used NotoSansKannada.ttf file from this
https://github.com/jenskutilek/free-fonts/blob/master/Noto/Noto%20Sans%20Kannada/TTF/NotoSansKannada-Regular.ttf
the versions that I'm using is
Angular CLI: 16.2.11
Node: 18.13.0
Package Manager: npm 8.19.3
Angular: 16.2.12
pdfmake version:0.2.10
@liborm85, please take a look at code attached and provide some guidance on how to fix the issue? Your expertise would be greatly appreciated!
Example is not complete, package.json is not available then it cannot be installed dependencies and there is no way to run it.
I think you don't have NotoSansKannada font in vfs_fonts.js file.
@liborm85 I have attached the screenshot of the vfs_fonts.js
While uploding the whole example I found that I cant upload more than 25MB.
and I have attached the package.json file for you reference and I have mailed you the entire example project
package.json
and also I have attached the repository link of the example project https://github.com/nagashreehr/pdfmake_Example
I don't know how angular does it, but if is pdfmake/build/vfs_fonts.js file is generated with NotoSansKannada font angular still sees file with default Roboto font.
I changed this line from import * as pdfFonts from 'pdfmake/build/vfs_fonts.js'; to import * as pdfFonts from './vfs_fonts.js'; and copy vfs_fonts.js file to app folder (and copy vfs_fonts.d.ts from node_modules@types\pdfmake\build\ to app folder). Now it works without errors.
@liborm85 I tried changing the import statement and also I copy the vfs_fonts.js and copy the vfs_fonts.d.ts and I encountered with the error as
I tried resolving those errors but I couldn't find any solution for this.
and when I run the code, HTML content is not displaying
Here is fixed working repo: https://github.com/liborm85/nagashreehr-pdfmake_Example and link to commit with changes: liborm85/nagashreehr-pdfmake_Example@515e012
@liborm85 Thankyou for the help.
Can I add two different fonts in vfs_fonts.js with the above changes in app folder?
yes, you can add all fonts you need.
@liborm85 Thank you for your assistance with this issue and for taking the time to help resolve it.