Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issues with characters not displayed correctly? #2677

Open
HackbrettXXX opened this issue Feb 20, 2020 · 26 comments
Open

Issues with characters not displayed correctly? #2677

HackbrettXXX opened this issue Feb 20, 2020 · 26 comments
Labels
persistent

Comments

@HackbrettXXX
Copy link
Collaborator

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.
@HackbrettXXX HackbrettXXX pinned this issue Feb 20, 2020
@HackbrettXXX HackbrettXXX mentioned this issue Mar 18, 2020
Closed
@HackbrettXXX HackbrettXXX mentioned this issue Mar 26, 2020
Closed
@HackbrettXXX HackbrettXXX mentioned this issue Jun 22, 2020
Closed
@github-actions
Copy link

github-actions bot commented Jul 3, 2020

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.

@a-ditucalan a-ditucalan mentioned this issue Jul 15, 2020
Closed
@subhapoduri subhapoduri mentioned this issue Aug 8, 2020
Closed
@083chandan 083chandan mentioned this issue Aug 11, 2020
Closed
@nirajctl nirajctl mentioned this issue Aug 19, 2020
Closed
@dian-kaagman dian-kaagman mentioned this issue Aug 21, 2020
Closed
@hyzhang6639 hyzhang6639 mentioned this issue Aug 23, 2020
Closed
@GaeTaeng GaeTaeng mentioned this issue Aug 31, 2020
Closed
@JoakFlores JoakFlores mentioned this issue Sep 11, 2020
Closed
@github-actions
Copy link

github-actions bot commented Oct 2, 2020

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.

@swarup-bhol swarup-bhol mentioned this issue Oct 5, 2020
Closed
@bikoocto bikoocto mentioned this issue Oct 8, 2020
Closed
@matondomp matondomp mentioned this issue Oct 16, 2020
Closed
@git-hariyali git-hariyali mentioned this issue Nov 24, 2020
Closed
@caranad caranad mentioned this issue Dec 13, 2020
Closed
This was referenced Dec 18, 2020
Closed
Closed
Closed
@github-actions
Copy link

github-actions bot commented Jan 4, 2021

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.

@HackbrettXXX HackbrettXXX reopened this Jan 11, 2021
@vadimt2 vadimt2 mentioned this issue May 21, 2021
Closed
@Yummy-sk
Copy link

Yummy-sk commented Aug 9, 2021

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

스크린샷 2021-08-09 오후 5 08 51

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

What is the problem with this?

@gsiradze
Copy link

@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
Copy link

@gsiradze No, I use another library

@AnAnUncle AnAnUncle mentioned this issue Sep 24, 2021
Closed
@FrankYFTang FrankYFTang mentioned this issue Dec 2, 2021
Closed
@mkubdev
Copy link

mkubdev commented Dec 6, 2021

@miriankakhidze hey, which one please ?

@gsiradze
Copy link

gsiradze commented Dec 6, 2021

@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
Copy link

mkubdev commented Dec 7, 2021

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

@ravish07 ravish07 mentioned this issue Dec 13, 2021
Closed
@Aleox15 Aleox15 mentioned this issue Feb 15, 2022
Closed
This was referenced Jun 2, 2022
Closed
Closed
@Pnayak10 Pnayak10 mentioned this issue Sep 14, 2022
Closed
@franziCoder franziCoder mentioned this issue Sep 20, 2022
Closed
@infinity351
Copy link

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.

@lilitmazmanyan lilitmazmanyan mentioned this issue Jan 10, 2023
Closed
@Application-Builder Application-Builder mentioned this issue Jan 13, 2023
Closed
@ali-mozaffari ali-mozaffari mentioned this issue Jan 23, 2023
Closed
@mexvod
Copy link

mexvod commented Feb 23, 2023

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

스크린샷 2021-08-09 오후 5 08 51

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

What is the problem with this?

#2968 (comment)

@mexvod
Copy link

mexvod commented Feb 23, 2023

@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>

#2968 (comment)

@vairamuthu16 vairamuthu16 mentioned this issue Mar 10, 2023
Closed
@Raj-Sohamtech Raj-Sohamtech mentioned this issue Jul 22, 2023
Closed
@Tejaswi2541 Tejaswi2541 mentioned this issue Jul 31, 2023
Closed
@Elcris1 Elcris1 mentioned this issue Sep 16, 2023
Closed
@Johongirmirzo Johongirmirzo mentioned this issue Dec 28, 2023
Closed
@milinfic milinfic mentioned this issue Feb 1, 2024
Open
@mgirolet-gl mgirolet-gl mentioned this issue Mar 18, 2024
Closed
@luckymore
Copy link

luckymore commented Apr 23, 2024 •
edited

@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")
image

@luckymore luckymore mentioned this issue Apr 25, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
persistent
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@luckymore @gsiradze @mexvod @miriankakhidze @HackbrettXXX @nivb52 @mkubdev @Yummy-sk @infinity351