web-dev-qa-db-ja.com

jsPDFライブラリでUTF-8を有効にする方法

HTMLページをPDFファイルとしてエクスポートするのに役立つjsPDFライブラリを使用して非常に満足しています。いくつかの問題に遭遇しました。ライブラリは http：// parall。 ax/products/jspdf / 。š、ć（UTF-8）などの一部の文字をPDFで使用すると、エラーのように見えます。doc.textを介して挿入しても、ライブラリのWebサイトで、これらの文字のいくつかを使用して例を示し、テキストを変更します-動作しますので、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" + '<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');
    });
});
}
javascripthtmlpdfutf-8jspdf
10
mpavlovic89

2015年の時点では、jsPDFはUTF-8を適切にサポートしていません。回避策は、jpgまたはpngをレンダリングしてpdfに追加するために html2canvas を使用することです。次のスニペットを使用してアイデアを得ることができます。

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文字を適切にレンダリングしますが、余白でスタイルを設定する場合を除いて、テキストを配置することはできません。
8
beyondfloatingpoint

jsPDFはまだUTF-8をサポートしていません。 pdfmake.orgはUTF-8をサポートしているようですが。 their playground を使用して、独自の文字でテストします。

3
João Pimentel Ferreira

jsPDFはUTF-8をサポートしていませんが、次のプラグインは、ファイル（FONTファイル）をBASE64に変換できるときに完全なカスタムフォントサポートを統合するため、これを可能にします。ArialUnicodeをbase64に変換して使用しました。コードにデバッグして対処する必要がある間隔と配置の問題。

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

0
Asha Koshti