CODEWITHSUNDEEP
javascriptjspdf
user13664104
user13664104

Reputation:

Using arabic characters in jspdf?

I want to render html page to pdf file but my page include arabic characters and jspdf can't encode and printing unknown text instead of the actual text , does anyone know how to fix that? and how i can custom font to like "HelveticaNeueLTArabic-Light.ttf"

<!doctype>
<html>
<head>
    <title>jsPDF</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style>
        @CHARSET "UTF-8";
        .page-break {
            page-break-after: always;
            page-break-inside: avoid;
            clear:both;
        }
        .page-break-before {
            page-break-before: always;
            page-break-inside: avoid;
            clear:both;
        }
    </style>
 </head>
<body>
    <button type ='button' onclick="generate()">Generate PDF</button>
<div id="div1" style='position: absolute; left: 20px; top: 50px; bottom: 0; overflow: auto; width: 600px'>

        <h1>Html2Pdf</h1>
        <p> test </p>
        <p>تجربة</p>
        
</div>

<script src='dist/jspdf.min.js'></script>

<script>
var base64Img = null;
imgToBase64('octocat.jpg', function(base64) {
    base64Img = base64; 
});

margins = {
  top: 70,
  bottom: 40,
  left: 30,
  width: 550
};

generate = function()
{
    var pdf = new jsPDF('p', 'pt', 'a4');
    var font ='xxxxxxxxxxx';
pdf.addFileToVFS("dist/Amiri-Regular.ttf", font);
pdf.addFont("dist/Amiri-Regular.ttf", "font", "normal");
    pdf.setFont('font');
    pdf.fromHTML(document.getElementById('div1'), 
        margins.left, // x coord
        margins.top,
        {
            // y coord
            width: margins.width// max width of content on PDF
        },function(dispose) {
            headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
        }, 
        margins);
        
    var iframe = document.createElement('iframe');
    iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
    document.body.appendChild(iframe);
    
    iframe.src = pdf.output('datauristring');
};
function headerFooterFormatting(doc, totalPages)
{
    for(var i = totalPages; i >= 1; i--)
    {
        doc.setPage(i);                            
        //header
        header(doc);
        
        footer(doc, i, totalPages);
        doc.page++;
    }
};

function header(doc)
{
    doc.setFontSize(30);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    
    if (base64Img) {
       doc.addImage(base64Img, 'JPEG', margins.left, 10, 40,40);        
    }
         doc.text(['تجربة'], 250, 100);
    doc.text("Report Header Template", margins.left + 50, 40 );
    doc.setLineCap(2);
    doc.line(3, 70, margins.width + 43,70); // horizontal line
};

// You could either use a function similar to this or pre convert an image with for example http://dopiaza.org/tools/datauri
// http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
function imgToBase64(url, callback, imgVariable) {
 
    if (!window.FileReader) {
        callback(null);
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            imgVariable = reader.result.replace('text/xml', 'image/jpeg');
            callback(imgVariable);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
};

function footer(doc, pageNumber, totalPages){

    var str = "Page " + pageNumber + " of " + totalPages
   
    doc.setFontSize(10);
    doc.text(str, margins.left, doc.internal.pageSize.height - 20);
    
};

 </script>
</body>
</html>

and the result like the below image and ,how to i can use RTL here ? enter image description here

Upvotes: 2

Views: 9874

Answers (1)

Andreas012
Andreas012

Reputation: 31

You probably need to add a font that supports arabic characters (From documentation "Use of Unicode Characters / UTF-8")

FontConverter

The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF.

Example:

var pdf = new jsPDF('p', 'pt', 'a4');
const myFont = ... // load the *.ttf font file as binary string
pdf.addFileToVFS("MyFont.ttf", myFont);
pdf.addFont("MyFont.ttf", "MyFont", "normal");

Upvotes: 3

Related Questions