CODEWITHSUNDEEP
htmljquerydatatablespdfmakearabic-support
Nanji Mange
Nanji Mange

Reputation: 2265

DataTable JQuery export PDF shows Arabic data in wrong direction

I have table which has data in Arabic. I use DataTable JQuery. It shows perfect when it is in table. But when I export PDF, direction of the sentence change and position of the word inverse. For example if there is a sentence of 3 words like "word1 word2 word3", pdf shows "word3 word2 word1"

Please find project sample on this link.

Screenshot: enter image description here

Upvotes: 2

Views: 3478

Answers (1)

Alaa mohammed
Alaa mohammed

Reputation: 161

As pdfmake does not support rtl languages out of the box you need to loop through table rows and reverse any characters.

This is how i implemented it:

$('#table').dataTable({
    buttons: [
        {
            extend: 'pdfHtml5',
            text: 'PDF',
            exportOptions: {
                columns: ':visible',
                modifier: {order: 'index'},
                format: {
                    body: function (data, row, column, node) {
                        const arabic = /[\u0600-\u06FF]/;

                        if (arabic.test(data)) {
                            return data.split(' ').reverse().join(' ');
                        }
                        return data;
                    },
                    header: function (data, row, column, node) {
                        const arabic = /[\u0600-\u06FF]/;

                        if (arabic.test(data)) {
                            return data.split(' ').reverse().join(' ');
                        }
                        return data;
                    }
                }
            }
        }
    ],
})

This code simply searches for arabic characters in your table header and body and reverse it. If your table has a footer you can copy,paste header part in exportOptions > header and rename it to footer and you are done.

Upvotes: 3

Related Questions