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]

your help in this issue is much appreciated.

[liborm85]

See documentation, how to use custom fonts: https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/

[nagashreehr]

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

[liborm85]

Attach runnable example for reproduce issue.

[nagashreehr]

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

[nagashreehr]

@liborm85, please take a look at code attached and provide some guidance on how to fix the issue? Your expertise would be greatly appreciated!

[liborm85]

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.

[nagashreehr]

@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

[liborm85]

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.

[nagashreehr]

@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

[liborm85]

Here is fixed working repo: https://github.com/liborm85/nagashreehr-pdfmake_Example and link to commit with changes: https://github.com/liborm85/nagashreehr-pdfmake_Example/commit/515e012f03314e621f77253e0445683b5231d409

[nagashreehr]

@liborm85 Thankyou for the help. Can I add two different fonts in vfs_fonts.js with the above changes in app folder?

[liborm85]

yes, you can add all fonts you need.

[nagashreehr]

@liborm85 Thank you for your assistance with this issue and for taking the time to help resolve it.