Search code examples
angularjspdf

Angular jspdf [atob] problem with custom font (greek characters)


I try to generate an pdf from the service with greek characters. on my local machine it's work's good. but on real server I'm getting error

sPDF PubSub Error Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

.ttf file is in service folder

I call this function from my component. service code is:

...//some imports

public printSomeData(data: any) {
    // getting data to the parse

      doc.addFileToVFS('Adria Slab W00 Medium.ttf')
      doc.addFont('Adria Slab W00 Medium.ttf', 'Adria Slab W00 Medium', 'normal')
      doc.setFont('Adria Slab W00 Medium', 'sans-serif')


      doc.setFontSize(data.fontSize)

      let body = []
      // generate body code

      autoTable(doc,{
        head: [head],
        body: body,
        tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        theme: 'grid',
        // headStyles: {co},
        bodyStyles: {lineColor: [0, 0, 0]},

        styles: {
          font: 'Adria Slab W00 Medium',    // <-- custom font
          fontStyle: 'normal',
          fontSize: data.fontSize,
          overflow: 'linebreak'
        },

      })

      doc.save('somename.pdf');

    }
  })
)

  }

Solution

    1. generate js file from the .ttf font file(use font converter online)

    2. create font.ts file in your service folder

    3. export const fontString : string ="AAEAAA"; <-- paste all string from generated file here

        import {fontString} from "./font";
        doc.addFileToVFS("AdriaSlabW00Medium.ttf", fontString);
        doc.addFont("AdriaSlabW00Medium.ttf", "Adria Slab W00 Medium", "normal");
        doc.setFont('Adria Slab W00 Medium', 'normal');