Jspdf: .html method can't handle Chinese correctly, even after used the .setFont method.

[FaustYKKN]

Hello, I'm using jsPDF 1.5.3 version, but I found Chinese doesn't display correctly when I use .html method. But it will work when I use the .text method.
This makes me confused. So, does there any solutions, for trans a Chinese HTML page to PDF
with using the awesome jsPDF? I will be very grateful for this 😊.

Here are my scripts:( I'm using SourceHanSansCN.ttf for Chinese, you can find it from here: Source-Han-TrueType )

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js'></script>
<script src="./js/SourceHanSansCN-Normal-normal.js"></script>

Here is my javascript code:

var doc = new jsPDF({ orientation: 'p', format: 'a4'  });
doc.setFont( 'SourceHanSansCN-Normal', 'normal' );
doc.html( '<div>Chinese: 中文</div>' , {
    callback: function ( newDoc ) {
        newDoc.save( 'chinese-html.pdf' )
    }
});

[Uzlopak]

How does .html know that it should use that chinese font?

So you should have to do something like <div style="font-family: SourceHanSansCN-Normal">chinese stuff<div>

[FaustYKKN]

Isn't the .setFont can resolve it? Could you give me some demos? Or I need to do some modifies in .html code?

[Uzlopak]

ok my last post had the html-markup parsed

So you should have to do something like <div style="font-family: SourceHanSansCN-Normal">中文<div>

[ShubhamOrbio]

Hi I am also facing the same issue while trying to convert my Japanese div to pdf.

var doc = new jsPDF({ orientation: 'p', format: 'a4'  });
doc.setFont( 'MouhitsuBolds', 'normal' );
doc.html( '<div style="font-family: MouhitsuBolds">領収書</div>' , {
    callback: function ( newDoc ) {
        newDoc.save( 'japanese-html.pdf' )
    }
});

It is generating garbage text. No luck. Is there any other solution for this. I have generated font js using the instructions provided in repo still no luck.

[Uzlopak]

@ShubhamOrbio
And where did you added the font?

[ErShubhamB]

@ShubhamOrbio
And where did you added the font?

I added the font in my project folder after including jspdf script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src='/js/MouhitsuBold-bold.js'></script>

[FaustYKKN]

@arasabbasi Thank you, I will learn more about PDF then have another try to fix UTF-8 and typesetting~

[Uzlopak]

@ErShubhamB

ok you use font-family, but not setting that the text should be bold by doing e.g. font-weight: bold?

[ErShubhamB]

@ErShubhamB

ok you use font-family, but not setting that the text should be bold by doing e.g. font-weight: bold?

Font-weight bold is also not working out. Output is same the garbage text

[ErShubhamB]

Ok so after spending few hours I can print Japanese text using .text method here. something like this:

var doc = new jsPDF('p', 'mm', 'a4');
doc.setFont('MouhitsuBold', 'bold'); // set font
      doc.setFontSize(20);
doc.text("おはようございます", 14, 15);
doc.save('sapmle.pdf')

but no luck with this code. it still prints garbage data. any help will be appreciated

doc.fromHTML($('#receipt-block').html(), 14, 15, {
        'width': 170,
    });

[Uzlopak]

yeah, using fromHTML should defiitly result in garbage.

[ErShubhamB]

By far this is the best solution I have got.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
var doc = new jsPDF('p', 'mm', 'a5');
    doc.addHTML(document.getElementById('target-div'),0,15 ,function () {
        doc.save('sample.pdf');
    });
</script>

Please let me know if you guys have any better solution

[ErShubhamB]

yeah, using fromHTML should defiitly result in garbage.

can you help me with a better solution please so that I can convert my div to pdf which is in Japanese

[Uzlopak]

till now you did not supply me with a jsfiddle or so. So how can I help you?

[ErShubhamB]

till now you did not supply me with a jsfiddle or so. So how can I help you?

Sorry my bad.
Fiddle URL: https://jsfiddle.net/Ershubham93/6vn9wufq/2/#&togetherjs=ACVVlRbLD9

[FaustYKKN]

@arasabbasi When I generated a font js from fontconverter.html , and it's fontName is composed of lowercase letters, just like fz, jsPDF.html method generated Chinese well.
But when there are some uppercase letters in fontName, just like Fz, Chinese in PDF will be garbled.
It’s amazing.

[Uzlopak]

Yes, thats expected behaviour.

[worrydog123]

@Uzlopak did you solve the problem that jdpdf.html() API don't support custom font?
I also have this problem, I try to convert the html to pdf and Igenerated a font js from fontconverter.html , and set the div's style(font-family:'weiruan'), and pdf.setFont('weiruan'),but it generated garbage data.

//index.html
<link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js" ></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="node_modules/html2canvas/dist/html2canvas.min.js"></script>
        <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
        <script src="js/weiruanfont-normal.js" type="module"></script>
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_1518465_15q1nzzb43y.css">

//index.html

<script>
// to convert html to pdf
   toPdf(){
                var pdf = new jsPDF('', 'pt', );
            let reportItem = document.getElementById('reportItem');
              let scale = 592.28/reportItem.offsetWidth;
                pdf.setFont('weiruanfont');
                pdf.setFontType('normal');
                console.log(pdf.getFontList()); //weiruanfont: Array(1) 0: "normal" length: 1
               console.log('font',pdf.getFontSize());//16
                pdf.html( reportItem,{
            callback: function (pdf) {

            pdf.save();
            },
            html2canvas: {
                scale: scale// default is window.devicePixelRatio
            },
            });


        }
</script>

//index.css
@font-face {
  font-family: 'weiruan';
  src: url("fonts/weiruan.ttf");
  font-style: normal;
}
.report-text{

  font-family: 'weiruan';
  font-weight: bold;
}

[kamranmuazzam]

if doc.setFont('fontname') works then setting font-family:'fontname' should work as well.
As mentioned earlier by @FaustYKKN you should use lowercase letters while naming your fonts

[Ma-Dawei]

@ErShubhamB
ok you use font-family, but not setting that the text should be bold by doing e.g. font-weight: bold?

Font-weight bold is also not working out. Output is same the garbage text

hello,have you solved this problem? I also meet that " fontType:blod" doesn't work when I added Chinese characters.

[Saggv]

Hello you guys, I got the same issue. I can't use Japanese in PDF. I added font, setFont...But it just work when use doc.text not doc.html('').
https://codepen.io/Sagvv/pen/QWGRwvo?editors=0110

[kamranmuazzam]

@Saggv , .setFont( ) works with.text( ) ,,, as you already know

.html is another method, so to set the font do the following

<div style="font-family: 'write your font name here' ">something in japanese<div>

This solution has already been mentioned :) , kudos

[Saggv]

@kamranmuazzam Thank you for you answer...I do the same thing as you said but it does not work. I don't know why :)) Thank you