Menu
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');
});
});
}
635
The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
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:
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
