Multiple fonts in pdfMake for dynamic content

Question

I am working with pdfMake, that converts the static text into pdf.

My text in HTML is coming from a service in AngularJS and is dynamic. The text can have both English as well as non-English characters like Korean, Japanese, Chinese, etc.

Currently, I have only English font, so it prints blank for the non-English characters.

How can one fix this issue?

The JS code:

  self.downloadAsPdf = function (dateTimeId) {
      var datetime = document.getElementById(dateTimeId).innerHTML;
      pdfMake.fonts = {
        proximaNova: {
          normal: 'proximanova-regular.ttf',
          bold: 'Roboto-Medium.ttf',
          italics: 'proximanova-light.ttf',
          bolditalics: 'proximanova-semibold.ttf'
        }
      };
      var docDefinition = {
          { text: 'Heading', style: 'header' },
          { text: 'Subheading', style: 'myscript' },
          { text: datetime, style: 'datetime' },
          { text: model.storyScriptData.personalMoment, style: 'body' }, 
          { text: model.storyScriptData.createAConnection, style: 'body' },                
          { text: model.storyScriptData.theResoultion, style: 'body' }
        ],
        defaultStyle: {
          font: 'proximaNova'
        },
        styles: {
          header: {
            fontSize: 24,
            alignment: 'center',
            color: "#ffffff",
            margin: [0, 60, 0, 0]
          },
          myscript: {
            fontSize: 18,
            alignment: 'left',
            color: "#a7a7a7",
            margin: [0, 100, 0, 0]
          },
          datetime: {
            fontSize: 11,
            alignment: 'left',
            color: "#a7a7a7",
            margin: [0, 2, 0, 36]
          },
          body: {
            fontSize: 13,
            alignment: 'left',
            color: "#727272",
            lineHeight: 1.5,
            bolditalics: true
          }
        }
      }

      pdfMake.createPdf(docDefinition).download('optionalName.pdf');
    }

where model.storyScriptData.personalMoment, model.storyScriptData.createAConnection and model.storyScriptData.theResoultion are the model's in AngularJS

score 1 · Answer 1 · answered Sep 20 '17 at 18:54

Suposing that you know which language is being used at each time, and that you can receive it from model on some atribute as model.storyScriptData.currentLanguage.

You should have a object similar to:

var fonts = {
    english: 'english_font_name',
    japanese: 'japanese_font_name',
    chinese: 'chinese_font_name',
    korean: 'korean_font_name'
}

Then you can choose the correct font for each language:

    defaultStyle: {
      font: fonts[model.storyScriptData.currentLanguage]
    }

You can add custom fonts to your pdfMake instance, as on their documentation here. Also, explained a bit differently in this response.

Multiple fonts in pdfMake for dynamic content

1 Answers1