Issues with characters not displayed correctly?

[HackbrettXXX]

Sometimes characters are not displayed correctly in the created PDF files and instead show some weird glyphs. This is the case for any characters outside the ASCII range. In order to fix this issue, you need to add a custom font to jsPDF. See the readme on how to do this:

The 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to to integrate a custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example chinese text in your pdf, your font has to have the necessary chinese glyphs. So check if your font supports the wanted glyphs or else it will show a blank space instead of the text. To add the font to jsPDF use our fontconverter in /fontconverter/fontconverter.html . The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[miriankakhidze]

does not work custom Georgian fonts

[HackbrettXXX]

@miriankakhidze please provide more details.

[miriankakhidze]

@HackbrettXXX for example: i'm using Calibri font. it's working in other app or in web, everywhere except in this PDF generator,

1. convert Calibri.ttf file to Base64 with this tool : https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
2. import to my react app : import "./Calibri Regular-normal";
3. set font family to div container

code fragment:

<div ref={conRef} style={{ fontFamily: "Calibri Regular", }} ></div>

` var doc = new jsPDF({ unit: "px", format: "a4", putOnlyUsedFonts: true, floatPrecision: 16, hotfixes: ["px_scaling"], filters: ["ASCIIHexEncode"], });

  doc
    .html(conRef.current, {
      filename: "test",
      x: 10,
      y: 10,
    })
    .output("pdfobjectnewwindow");

`

after this, when it is generating showing like this:

[miriankakhidze]

it's working on English alphabet but not Georgian

[HackbrettXXX]

@miriankakhidze which version of jsPDF do you use? When using the html method you might also try the new fontFaces API (jsPDF@>=2.3.0).

[miriankakhidze]

@HackbrettXXX I'm using 2.3.0

[miriankakhidze]

@HackbrettXXX i tried it too, but still not working,

doc.html(conRef.current, { callback(isPdf) { isPdf.setFont("Calibri Regular"); isPdf.save(); }, filename: "test", fontFaces: [ { family: "Calibri Regular", weight: 500, stretch: "normal", src: ["/fonts/calibri.ttf"], }, ], x: 5, y: 5, });

<div ref={conRef} style={{ fontFamily: "Calibri Regular", }} >...</div>

[HackbrettXXX]

@miriankakhidze Please share small complete project so we can reproduce the issue.

[miriankakhidze]

@HackbrettXXX I created brand new next.js app, there is just jspdf dependence. also into "public/fonts/" is "Calibri" font. https://github.com/miriankakhidze/jspdf-georgian

Thank You

[HackbrettXXX]

@miriankakhidze thanks for the repro. I can indeed reproduce the issue, but could not figure out what's causing it at a quick glance. Seems like a bug in jsPDF. I'm creating a new issue for this: #3080.

[miriankakhidze]

@HackbrettXXX Thank you for this

[nivb52]

@miriankakhidze Are "Calibri" font can produce those character ? can you reproduce this bug with other font ? I have same problem and after changing several fonts i was able to see the text please refer to #2677

Also try to add also Bold and Italic of this font

[miriankakhidze]

@nivb52 HI, yes it can. I tried several fonts, some works , some not. but I wanted "Calibri", I'll check , Thank you.

[Yummy-sk]

korean font is not working properly..

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8" />
      <title>Vanilla JS</title>
    </head>
    <body>
      <div id="temp">
        <h1>안녕하세요</h1>
        <ul>
          <li>사과</li>
          <li>오렌지</li>
          <li>바나나</li>
        </ul>
      </div>
      <button id="hi">다운로드</button>
    </body>
  </html>

app.js

import {jsPDF} from 'jspdf';
import { font } from './font';

const button = document.querySelector('#hi');
const koreanTextDiv = document.querySelector('#temp');

button.addEventListener('click', () => {
  const doc = new jsPDF();

  doc.html(koreanTextDiv, {
    callback (doc) {
      // setting language
      doc.addFileToVFS('NanumGothic-Regular-normal.ttf', font);
      doc.addFont('NanumGothic-Regular-normal.ttf', 'NanumGothic-Regular', 'normal');
      doc.setFont('NanumGothic-Regular');
      doc.setLanguage('ko-KR');
      doc.save();
    },
    fontFaces: [{
      family: 'NanumGothic-Regular',
      src: ["/NanumGothic-Regular.ttf"]
    }]
  })
});

result

but, when I change to English font It works right.

What is the problem with this?

[gsiradze]

@HackbrettXXX I created brand new next.js app, there is just jspdf dependence. also into "public/fonts/" is "Calibri" font. https://github.com/miriankakhidze/jspdf-georgian

Thank You

@miriankakhidze Were you able to fix this? Or make it work on any Georgian font.

[miriankakhidze]

@gsiradze No, I use another library

[mkubdev]

@miriankakhidze hey, which one please ?

[gsiradze]

@mkubdev not sure if this will help but in my case I did this and it worked pretty well document.getElementById('pdf-data').contentWindow.print();

[mkubdev]

@gsiradze thank you! Kudos, it's working ✨

[infinity351]

I am trying to display data in Chinese, but for Chinese texts it is showing some weird text. Do anyone know how to fix this encoding issue. 赖汉·拉扎 this text is showing up like this •VlI ·bÉbN Any help would be highly appreciated.

[mexvod]

korean font is not working properly..

index.html

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="utf-8" />
      <title>Vanilla JS</title>
    </head>
    <body>
      <div id="temp">
        <h1>안녕하세요</h1>
        <ul>
          <li>사과</li>
          <li>오렌지</li>
          <li>바나나</li>
        </ul>
      </div>
      <button id="hi">다운로드</button>
    </body>
  </html>

app.js

import {jsPDF} from 'jspdf';
import { font } from './font';

const button = document.querySelector('#hi');
const koreanTextDiv = document.querySelector('#temp');

button.addEventListener('click', () => {
  const doc = new jsPDF();

  doc.html(koreanTextDiv, {
    callback (doc) {
      // setting language
      doc.addFileToVFS('NanumGothic-Regular-normal.ttf', font);
      doc.addFont('NanumGothic-Regular-normal.ttf', 'NanumGothic-Regular', 'normal');
      doc.setFont('NanumGothic-Regular');
      doc.setLanguage('ko-KR');
      doc.save();
    },
    fontFaces: [{
      family: 'NanumGothic-Regular',
      src: ["/NanumGothic-Regular.ttf"]
    }]
  })
});

result

but, when I change to English font It works right.

What is the problem with this?

https://github.com/parallax/jsPDF/issues/2968#issuecomment-1442572265

[mexvod]

@HackbrettXXX i tried it too, but still not working,

doc.html(conRef.current, { callback(isPdf) { isPdf.setFont("Calibri Regular"); isPdf.save(); }, filename: "test", fontFaces: [ { family: "Calibri Regular", weight: 500, stretch: "normal", src: ["/fonts/calibri.ttf"], }, ], x: 5, y: 5, });

<div ref={conRef} style={{ fontFamily: "Calibri Regular", }} >...</div>

https://github.com/parallax/jsPDF/issues/2968#issuecomment-1442572265

[luckymore]

@HackbrettXXX Hi, I'm getting garbled Chinese when using textField.

import { jsPDF } from "jspdf";
import fs from "fs";

const doc = new jsPDF();

var SimSun = fs.readFileSync('./SimSun.ttf', {
  encoding: 'latin1',
});

doc.addFileToVFS('simsun.ttf', SimSun);
doc.addFont('simsun.ttf', 'simsun', 'normal');
doc.setFont('simsun');

const textField = new doc.AcroForm.TextField()
textField.Rect = [20, 20, 50, 50]
textField.value = '你好 世界! hello world!';
textField.fontStyle = 'normal';

doc.text(20, 20, '你好 世界! hello world!');
doc.addField(textField)

doc.save("hello.pdf")