Jspdf: Convert html to pdf: utf-8 works only with text, but not html

Created on 4 Jan 2020  Β·  6Comments  Β·  Source: MrRio/jsPDF

I need to convert html to pdf with jsPDF. It contains UTF-8 symbols (cyrillic). I used fontconverter to generate js-file for my custom font as written here: https://github.com/MrRio/jsPDF

So now example with text works like a charm (from https://github.com/MrRio/jsPDF/blob/master/examples/js/russian.js)

var pdf = new jsPDF('p', 'pt', 'letter');
doc.setFont('PTSans');
doc.setFontSize(10);
doc.text("А Π½Ρƒ Ρ‡ΠΈΠΊΠΈ Π±Ρ€ΠΈΠΊΠΈ ΠΈ Π² Π΄Π°ΠΌΠΊΠΈ!", 10, 10);

And example with html ignores my custom font and exports incorrect symbols.

var pdf = new jsPDF('p', 'pt', 'letter');
doc.setFont('PTSans');
doc.setFontSize(10);
pdf.html( "<html>А Π½Ρƒ Ρ‡ΠΈΠΊΠΈ Π±Ρ€ΠΈΠΊΠΈ ΠΈ Π² Π΄Π°ΠΌΠΊΠΈ!</html>", { callback: function (pdf) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
    document.body.appendChild(iframe);
    iframe.src = pdf.output('datauristring');
    }
});

What I need to do to export html to pdf with unicode symbols?

no-issue-activity
Source
picture AFilipchyk

Most helpful comment

I use convert file PTSans.ttf
https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
add in file PTSans-normal.js
import jsPDF from 'jspdf'

And in my App used jsPDF

import 'assets/fonts/PTSans-normal.js';
import jsPDF from 'jspdf';

const doc = new jsPDF();

doc.setFont('PTSans'); // set custom font
doc.text('ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!', 10, 10) // It's working
picture vvarh on 29 Jan 2020
👍2 🎉1

All 6 comments

Finally I've decided to use pdfmake, it works correctly with utf-8 symbols.

AFilipchyk picture AFilipchyk on 8 Jan 2020
😄1

I use convert file PTSans.ttf
https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
add in file PTSans-normal.js
import jsPDF from 'jspdf'

And in my App used jsPDF

import 'assets/fonts/PTSans-normal.js';
import jsPDF from 'jspdf';

const doc = new jsPDF();

doc.setFont('PTSans'); // set custom font
doc.text('ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ΠΌΠΈΡ€!', 10, 10) // It's working
vvarh picture vvarh on 29 Jan 2020
👍2 🎉1

@AFilipchyk, how does it work ?
I need to create a PDF file from react component in Macedonian language(also cyrillic).
Can it do the job for me ?

NikicaCh picture NikicaCh on 5 Mar 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.

github-actions[bot] picture github-actions[bot] on 4 Jul 2020

@AFilipchyk for what it worth, you need to set font-family style in your HTML element or string.

ixdguru picture ixdguru on 19 Aug 2020

@AFilipchyk oh really how does it work!! Can you please share how you pass UTF-8 code using pdfmake

SubhashGaikwad picture SubhashGaikwad on 16 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tomkidumbuyo picture tomkidumbuyo  Β·  4Comments
sayo96 picture sayo96  Β·  3Comments
centurianii picture centurianii  Β·  4Comments
andmaltes picture andmaltes  Β·  4Comments
mackersD picture mackersD  Β·  4Comments