Search code examples
javascriptjspdf

Some UTF-8 Characters (Turkish) are Shown as HTML Numeric Code in jsPDF

I'm trying to create a PDF file that includes Turkish characters using jsPDF library. Before I change anything, it was creating PDF's like that:

"Ğ" character is looking empty and "Ö" character is shown as HTML numeric code which is Ö

Code of this example:

var doc = new jsPDF(('p','pt','a4'));

doc.setFontType("bold");
doc.text(60, 28, 'Given name(s):');
doc.setFontType("normal");
doc.text(88, 28, 'OĞUZHAN');
doc.setFontType("bold");
doc.text(60, 32, 'Place and date of birth:');
doc.setFontType("normal");
doc.text(101, 32, 'KADIKÖY,');

doc.save('test.pdf');

Then I pick a font which has Turkish characters and .tff extension. I convert it with using Font Converter that developer creates.

It gave me a .js file. After I include that file and .tff file to project, now I'm seeing final PDF like that:

"Ğ" character is looking good now but "Ö" character is still looking Ö

I just change the font using doc.setFont("timestr");:

var doc = new jsPDF(('p','pt','a4'));

doc.setFont("timestr");
doc.setFontType("bold");
doc.text(60, 28, 'Given name(s):');
doc.setFontType("normal");
doc.text(88, 28, 'OĞUZHAN');
doc.setFontType("bold");
doc.text(60, 32, 'Place and date of birth:');
doc.setFontType("normal");
doc.text(101, 32, 'KADIKÖY,');

doc.save('test.pdf');

Of course I include .js files that converter gave me:

<script src="/fonts/timestr-normal.js"></script>
<script src="/fonts/timestr-bold.js"></script>
<script src="/fonts/timestr-italic.js"></script>
<script src="/fonts/timestr-bolditalic.js"></script>

One of these .js files like that:

(function (jsPDFAPI) {
var font = 'AAEAAAAZAQA...'; // A very long string, I shorted it to show you
var callAddFont = function () {
this.addFileToVFS('timestr-normal.ttf', font);
this.addFont('timestr-normal.ttf', 'timestr', 'normal');
};
jsPDFAPI.events.push(['addFonts', callAddFont])
 })(jsPDF.API);

Where is the problem? It's very strange that "Ğ" character is looking normal after all these process but "Ö" character isn't looking properly, isn't it?

Solution

  • Okay problem solved: Since I was using C#, I was getting these texts from my modal and I had to use them inside Html.Raw() method. So I wrote like that Html.Raw(@model.Name) and it solved the problem.