Search code examples
vue.jsutf-8jspdf

Display UTF-8 JSPdf with VueJS

I am trying to display a catalog of products in pdf using JSPdf with VueJS. Data are coming from an API.

Base on the choice langage, the data will be in English, French etc...

Letters are working in English. But in French the problem is for letter like "é è à ç" etc... All this letter are displaying in a strange way. I read a lot of about setting a new font but it's still not working like this.

So I am coming here to see if somebody can share a script using VueJS to setup a custom fonts working with UTF-8 enconding.

Here is a minimal function but the idea is here:

  download() {
  let pdfRef = this.$refs.pdf;

  html2canvas(pdfRef).then(canvas => {
    let pdf = new jsPDF();
    const str = "éçàeéi test";
    pdf.save("Articles.pdf");
  });
},

On the pdf i will see. Sometimes some letters are blank also.

é è à ç test

instead of

éçàeéi test

Thank you in advance.

Have a nice day!

Solution

  • Following this Link it's working perfectly. It's funny i following this doc before but i did not use a binary string to convert my ttf font.

    I downloaded the font on google fonts and after i used a website to convert file ttf to base64 and get the string for the variable const myFont. Don't be scared because it can be thousand of letters

    Just after the solution!

    Thank you for your help and have a nice day :)

    
const myFont = ... // load the *.ttf font file as binary string

// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont"); ```