首页 文章

如何在 jsPDF 库中启用 UTF-8

提问于
浏览 次
10

我很高兴使用 jsPDF 库帮助我将我的 HTML 页面导出为 PDF 文件。我遇到了一些困难。我从http://parall.ax/products/jspdf/下载了这个库。当我使用像š，ć(UTF-8)这样的字符时，在 pdf 中它们看起来像错误。即使我通过 doc.text 插入。在图书馆的网站上，当我使用他们的例子并使用其中一些字符更改文本时 - 它可以工作。因此，假设使用 UTF-8。为什么它不能在我的电脑上工作。

我提供了我的代码。这里缺少的是 lib(可以从网站上下载)，你会看到我的问题。为什么 CSS 在 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" + '
');
}
</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>
');
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');
    });
});
}
javascript html pdf utf-8 jspdf

3 回答

  • 7

    截至 2015 年，jsPDF 不能正确支持 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;
        //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');
    });

};

    另一个支持 utf-8 编码的库是：

    • PDFKit，报告允许您使用坐标正确放置文本。

    • PDFMake，正确呈现 UTF-8 个字符，但不允许您定位文本，除了使用边距样式化它。

    回复于
  • 3

    jsPDF 仍然不支持 UTF-8。虽然似乎 pdfmake.org 支持 UTF-8。尝试使用他们的操场并使用您自己的字符进行测试：

    回复于
  • 0

    jsPDF 不支持 UTF-8 虽然下面的插件确实可以实现，因为它可以整合完全自定义字体支持，当你可以转换 file(FONT 文件)到 BASE64.I 已经将 Arial Unicode 转换为 base64 并使用它虽然它创建了一些间距和对齐问题，你需要通过调试代码来处理。

    https://github.com/sphilee/jsPDF-CustomFonts-support

    回复于

相关问题