Search code examples
fontsjspdf

Jspdf 2.5.1 doc.addFileToVFS is not a function

I want utf8 greek characters in my pdf.I have a custom font in base 64.

I use the addFileToVFS but it says it's not a function.I have also tried using the font converter but to no use.

If it helps i use cdn for the library

Edit: Kj's solution did the trick! Turns out my problem was that I was using jspdf.umd.min.js. Many tutorials I saw used this approach:

<!-- Include jsPDF library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

But after changing to jspdf.umd.js everything works as expected!

  <!-- Include jsPDF library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.js"></script>

A big thanks to KJ for helping!I am new to stack overflow but this was a great exprerience.Ps:Sorry for my initial post lacking details i learned from that and i will be more detailed in the future.Have a nice day.

Solution

  • It is possible to use "Default" PDF Greek as symbols in jsPDF without a font. However I do NOT recommend it, as slow to sort out spacing of back feeds for accents and a nightmare unless you have a custom key mapper.

    enter image description here

    Depending on how you source your preferred custom font (as a ttf) it needs to be embedded inside the page before convert to replace those PDF symbols. What we need is a mapping from PDF keyboard numeri's "ToUnicode" as provided in a good TTF file.

    Commonly DeJaVu or Noto font is suggested but any with good Greek alphabet should work. Here I selected Rounded_Elegance and submitted for conversion to JS. Pick UMD or ES to match your js.PDF lib.

    enter image description here

    Now we set the text in HTML, with the converted font.js in same folder (There are several other ways) this is usually the simplest.

    <!DOCTYPE html>
<HTML><head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <script src="jspdf.umd.js"> // Here local but can be CDN </script>
  <script src="Rounded_Elegance-normal.js"> // Here we have the font in same folder </script>

  Click me

    <script>
    window.jsPDF = window.jspdf.jsPDF;
    var doc = new jsPDF();

    //confirm stored font is to be used
    doc.addFont('Rounded_Elegance-normal.ttf', 'Greekish', 'normal'); // choose a shorter name

    doc.setFont("Greekish", "normal"); // set custom font from here onwards
    doc.setFontSize(40);
    doc.text("Γεια σας κόσμος!", 50, 50);

    doc.save("a4.pdf"); // will save the file in the current working directory
</script></body></html>

    Hmm perhaps not as Elegant as Promised but it works. enter image description here