CODEWITHSUNDEEP
angularionic-frameworkpdfmake
Kwong
Kwong

Reputation: 98

File 'pdfmake/build/Roboto-Regular.ttf' not found in virtual file system WHEN USING TWO LANGUAGES (pdfMake)

I want to generate a pdf in both English and Chinese by using pdfMake in Ionic/Angular. I have used gulp to create a new vfs_fonts.js and replace the original one in Build folder and also put all .ttf files in the same Build folder. It can output English (but NOT Chinese) if I DON'T define 

pdfMake.fonts = {
   Roboto: {
     normal: XXXXX
      ..........
   },
   cwTeXQMing: {
     normal: XXXXX
     ..........
   }
};

But once I put these codes in place, it will warn me the error "File 'pdfmake/build/Roboto-Regular.ttf' not found in virtual file system" or "File 'pdfmake/build/cwTeXOMing.ttf' not found in virtual file system". I google and search SO but seems those solutions not work for me. Please help.

import * as pdfMake from 'pdfmake/build/pdfmake.js'; // Could not find a declaration file for 
                                                     // module 'pdfmake/build/pdfmake.js'
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  Roboto: {
    normal: 'pdfmake/build/Roboto-Regular.ttf',
    bold: 'pdfmake/build/Roboto-Regular.ttf',
    italics: 'pdfmake/build/Roboto-Regular.ttf',
    bolditalics: 'pdfmake/build/Roboto-Regular.ttf'
  },
 cwTeXQMing: {
    normal: 'pdfmake/build/cwTeXQMingZH-Medium.ttf',
    bold: 'pdfmake/build/cwTeXQMingZH-Medium.ttf',
    italics: 'pdfmake/build/cwTeXQMingZH-Medium.ttf',
    bolditalics: 'pdfmake/build/cwTeXQMingZH-Medium.ttf'
 }
};


@Component({
selector: 'app-export',
templateUrl: './export.page.html',
styleUrls: ['./export.page.scss'],
})
export class ExportPage {

selectVersion = '';
pdfObj = null;

constructor() {}

async createPdf() {

if (this.selectVersion === 'Chinese') {
 const docDefinition = {
    pageSize: 'A4',
    font: 'cwTeXQMing',
    content: [
      {
        text: '通知我'
        , style: 'firstParagraph'
      }, 
   ],
    defaultStyle: {
      font: 'cwTeXQMing',
    },
    styles: {
      font: 'cwTeXQMing',  
      firstParagraph: {
        fontSize: 11,
      },
    }
   };
   this.pdfObj = pdfMake.createPdf(docDefinition);

} else {     // TO OUTPUT ENGLISH

 const docDefinition = {
    pageSize: 'A4',
    content: [
      {
        text: 'THIS IS ENGLISH PDF'
        , style: 'firstParagraph'
      }, 
   ],
    styles: {
      firstParagraph: {
        fontSize: 11,
      },
    }
   };
   this.pdfObj = pdfMake.createPdf(docDefinition);
}

Upvotes: 0

Views: 5488

Answers (2)

call_me_J
call_me_J

Reputation: 1

I encountered a similar issue and I solve it by simply updating the CDN links for the vfs_fonts.js.

You can check the links at https://www.cdnpkg.com/pdfmake

Upvotes: 0

Kwong
Kwong

Reputation: 98

Solved. Instead of "normal: 'pdfmake/build/Roboto-Regular.ttf'", just type the file name "normal: 'Roboto-Regular.ttf'".

Upvotes: 1

Related Questions