How to enable UTF-8 in jsPDF library
I am very happy to use jsPDF library which helps me to export my HTML page as PDF file. I came across some difficulties. I downloaded the library from http://parall.ax/products/jspdf/. When I use some characters like š, ć (UTF-8), in pdf they look like error. Even if I insert via doc.text. On the library's website, when I use their examples and change text using some of these characters - it works. So it is suppose to work with UTF-8. Why it isn't working on my computer.
I provide you my code. All missing here is the lib (which can be downloaded from the website) and you will see my problem. And why the CSS is dissapeared in pdf?
testing.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING JSPDF LIB</title>
<script type="text/javascript" src="pdffile.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
<script>
function redirect() {
document.write("Hello world" + '<br />');
}
</script>
</head>
<body>
<div id="box" class="box-shadow">
<input type="submit" name="ok" id="ok" value="LETS TRY" onClick="redirect();pdf();" /> </div>
</div>
</body>
</html>
pdffile.js
function pdf() {
document.write('<div id="mydiv" style="background-color:#CCC; width:780px;640px;"><p>Open these letters š and c in PDF file and see error</p></div><br />');
document.write('<button id="export">OPEN IN PDF FILE</button>');
$(function () {
var doc = new jsPDF();
doc.text(35, 25, "Text with the letter Š");
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}
};
$('#export').click(function () {
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
}
Answer
As of 2015, jsPDF doesn't support UTF-8 properly, workaround is to use html2canvas to render jpg or png and to add it to pdf. You can use following snippet to get an idea:
var doc = new jsPDF();
var utf_8_string_to_render = 'any_value_you_want';
Promise.all(
[
new Promise(function (resolve)
{
var temp = document.createElement("div");
temp.id = "temp";
temp.style = "color: black;margin:0px;font-size:20px;";
phrase = utf_8_string_to_render;
temp.innerHTML= phrase;
//need to render element, otherwise it won't be displayed
document.body.appendChild(temp);
html2canvas($("#temp"), {
onrendered: function(canvas) {
$("#temp").remove();
resolve(canvas.toDataURL('image/png'));
},
});
})
]).then(function (ru_text) {
doc.addImage(ru_text[0], 'JPEG', 0,0);
doc.text(0, 10, 'Non-utf-8-string' );
doc.save('filename.pdf');
});
};
Another libraries that do support utf-8 coding are: