如何在jsPDF库中启用UTF-8 [英] How to enable UTF-8 in jsPDF library
问题描述
我很高兴使用jsPDF库，它可以帮助我将我的HTML页面导出为PDF文件。我遇到了一些困难。我从 http://parall.ax/products/jspdf/ 下载了该库。当我使用一些字符如š，ć（UTF-8）时，它们看起来像是错误。即使我通过doc.text插入。在图书馆的网站上，当我使用他们的例子并使用其中的一些字符来改变文本时 - 它可以工作。所以它假设使用UTF-8。为什么它不能在我的电脑上运行。
我向您提供我的代码。所有在这里丢失的是lib（可以从网站上下载），你会看到我的问题。为什么CSS在pdf中消失？
testing.html
< HTML>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> TESTING JSPDF LIB< / title>
< script type =text / javascriptsrc =pdffile.jscharset =utf-8>< / script>
< script type =text / javascriptsrc =jspdf / jquery / jquery-1.11.0.min.js>< / script>
< script type =text / javascriptsrc =jspdf / jspdf.js>< / script>
< script type =text / javascriptsrc =jspdf / libs / Deflate / adler32cs.js>< / script>
< script type =text / javascriptsrc =jspdf / libs / FileSaver.js / FileSaver.js>< / script>
< script type =text / javascriptsrc =jspdf / libs / Blob.js / BlobBuilder.js>< / script>
< script type =text / javascriptsrc =jspdf / jspdf.plugin.addimage.js>< / script>
< script type =text / javascriptsrc =jspdf / jspdf.plugin.standard_fonts_metrics.js>< / script>
< script type =text / javascriptsrc =jspdf / jspdf.plugin.split_text_to_size.js>< / script>
< script type =text / javascriptsrc =jspdf / jspdf.plugin.from_html.js>< / script>
< script>
函数redirect（）{
document.write（Hello world+'< br />'）;
}
< / script>
< / head>
< body>
< div id =boxclass =box-shadow>
< input type =submitname =okid =okvalue =LETS TRYonClick =redirect（）; pdf（）; /> < / DIV>
< / div>
< / body>
< / html>
pdffile.js
函数pdf（）{
document.write（'< div id =mydivstyle =background-color：#CCC; width：780px; 640px ;>< p>在PDF文件中打开这些字母š和c并查看错误< / p>< / div>< br />'）;
document.write（'< button id =export> OPEN IN PDF FILE< / button>'）;
$（函数（）{
var doc = new jsPDF（）;
doc.text（35，25，带字母的文本）;
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'）;
}）;
}）;
}
截至2015年，jsPDF doesn不正确地支持UTF-8，解决方法是使用 html2canvas 呈现jpg或png并将其添加到pdf。您可以使用下面的代码片段来了解一个想法：
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;
//需要渲染元素，否则不会显示
document.body.appendChild（temp）;
html2canvas（$（＃temp ），{
onrendered：function（canvas）{
$（＃temp）。remove（）;
resolve（canvas.toDataURL（'image / png' ））;
$ b $） 0]，'JPEG'，0,0）;
doc.text（0，10，'Non-utf-8-string'）;
doc.save（'filename。 pdf'）;
}）;
};
支持utf-8编码的另一个库包括：
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');
});
});
}
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:
- PDFKit, which is reported to allow you to proper place your texts with coordinates.
- PDFMake, which renders UTF-8 characters properly, but doesn't allow you to position text, except for styling it with margins.
这篇关于如何在jsPDF库中启用UTF-8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
