web-dev-qa-db-fra.com

Comment activer UTF-8 dans la bibliothèque jsPDF

Je suis très heureux d'utiliser la bibliothèque jsPDF qui m'aide à exporter ma page HTML en tant que fichier PDF. Je suis tombé sur des difficultés. J'ai téléchargé la bibliothèque de http://parall.ax/products/jspdf/ . Lorsque j'utilise des caractères comme š, ć (UTF-8), en pdf, ils ressemblent à une erreur. Même si j'insère via doc.text. Sur le site Web de la bibliothèque, lorsque j'utilise leurs exemples et que je modifie du texte en utilisant certains de ces caractères, cela fonctionne. Il est donc supposé fonctionner avec UTF-8. Pourquoi ça ne marche pas sur mon ordinateur.

Je vous fournis mon code. Tout ce qui manque ici, c'est la lib (qui peut être téléchargée sur le site) et vous verrez mon problème. Et pourquoi le CSS disparaît-il en 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
9
mpavlovic89

À partir de 2015, jsPDF ne prend pas correctement en charge UTF-8. La solution consiste à utiliser html2canvas pour restituer un fichier jpg ou png et l’ajouter au format pdf. Vous pouvez utiliser l'extrait suivant pour vous faire une idée:

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');
    });


};

Les autres bibliothèques prenant en charge le codage utf-8 sont: 

  • PDFKit , qui est rapporté pour vous permettre de placer correctement vos textes avec des coordonnées.
  • PDFMake , qui restitue correctement les caractères UTF-8, mais ne vous permet pas de positionner le texte, sauf pour le styler avec des marges.
6
beyondfloatingpoint

jsPDF ne prend toujours pas en charge UTF-8. Bien qu'il semble que pdfmake.org supporte UTF-8. Essayez d'utiliser leur terrain de jeu et testez-le avec vos propres personnages:

3
João Pimentel Ferreira

jsPDF ne prend pas en charge UTF-8 Bien que le plug-in suivant le rende possible, car il intègre la prise en charge complète des polices personnalisées lorsque vous pouvez convertir votre fichier (FONT File) en BASE64.J'ai converti Arial Unicode en base64 et je l’ai utilisé problèmes d’espacement et d’alignement que vous devez traiter en déboguant dans le code.

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

0
Asha Koshti