CODEWITHSUNDEEP
javascriptreactjsjspdf
Qubaish Bhatti
Qubaish Bhatti

Reputation: 728

JsPDF not supporting Japanese language

I am using JsPDF for my react project and facing some issues while saving pdf for Japanese version but it is working fine with English version.

Issues Sometimes it is printing some random special chracters and sometimes it prints nothing on pdf.

Any help would be appreciated.

Here is my code

import React from "react";
import jsPDF from 'jspdf';
import "./styles.css";

const HelloWorldJapanese = 'こんにちは世界';

export default function App() {

  const downloadPdf = () => {
    const doc = new jsPDF()
    doc.text('Hello world!', 10, 10)
    doc.save('a4.pdf')
  }

  const downloadJapanesePDF = () => {
    const doc = new jsPDF();
    doc.text(HelloWorldJapanese, 10, 10)
    doc.save('a4.pdf');
  }

  return (
    <div className="App">
     <button onClick={downloadPdF}>Download Pdf</button>
     <br />
     <button onClick={downloadJapanesePDF}>Download Japanese Pdf</button>
    </div>
  );
}

SandBox Demo: https://codesandbox.io/s/jspdf-bk7p3

Upvotes: 1

Views: 4451

Answers (2)

emptygenome
emptygenome

Reputation: 1

as far as i remember , what i did was i convert a MouhitsuBold.ttf into base64 , put it into file (you can chose what file type you want as long as you know how to call the base64string its either js file or txt file but mine was js file like this )

export default {
myFunction(){
return myBase64Txt
}
}

and you can import that function into other file

import myFunction from "<thelocationofthefile>"

After that i use doc.addFileToVFS("MS-Gothic_new.ttf",myFunction.myFunction());

and then

  doc.addFont("MS-Gothic_new.ttf", "MS-Gothic_new", "bold");

 doc.setFont("MS-Gothic_new", "bold");

also you can do other ideas , you just need to import the base64 of MouhitsuBold.ttf to VFS

i hope it helps

Upvotes: 0

Doan Van Thang
Doan Van Thang

Reputation: 997

You have to add the font-file manually. For instance, in jsPDF git

doc.addFont("test/reference/MouhitsuBold.ttf", "Mouhitsu", "bold");

doc.setFont("Mouhitsu", "bold"); // set font

I added code in glitch for easy demonstrate (preview pdf in glitch only work on show in new window)

Upvotes: 2

Related Questions