Arabic sentence for words are reversed on datatables pdfhtml5 "pdfmake"

Question

I have changed the default font to a font that supports arabic The words supposed to be shown this way:

تقارير حركة الرسائل

But they are shown as

الرسائل حركة تقارير

function processDoc(doc) {
  // https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
  pdfMake.fonts = {
    Roboto: {
      normal: 'Roboto-Regular.ttf',
      bold: 'Roboto-Medium.ttf',
      italics: 'Roboto-Italic.ttf',
      bolditalics: 'Roboto-MediumItalic.ttf'
    },
    scheherazade: {
      normal: 'Scheherazade-Regular.ttf',
      bold: 'Scheherazade-Regular.ttf',
      italics: 'Scheherazade-Regular.ttf',
      bolditalics: 'Scheherazade-Regular.ttf'
    }
  };
  // modify the PDF to use a different default font:
  doc.defaultStyle.font = "scheherazade";

}
  $(function () {
      
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: "{{ route('messaage_movements.index') }}",
          "method": "GET",
          data: function (d) {
                d.search = $('input[type="search"]').val()
            }
        },
        
          dom: 'Bfrtip',

        buttons: [
            // {
            // extend: 'pdfHtml5',
            // text: 'PDF',
         
            // } ,
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'print',
            {
                extend: 'pdfHtml5',
                // download: 'open',
                 title: '{{__('messages.messaage_movements')}}',

      customize: function ( doc ) {
        processDoc(doc);
        doc.content.splice( 1, 0, {
                    margin: [ 0, 0, 0, 12 ],
                    alignment: 'right',
              } );
      },
            }
            
        ],
        columns: [
            {data: 'id', name: 'id'},
            {data: 'message', name: 'message'},
            {data: 'user_id', name: 'user_id'},
            {data: 'number_massages', name: 'number_massages'},
            {data: 'status', name: 'status'},
            {data: 'reason', name: 'reason'},
            {data: 'date_sent', name: 'date_sent'},

            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
     `enter code here`           searchable: true
            },
        ]
    });
  
  });

I have followed a code like that but turned it into arabic I don't know where to put the direction="rtl" in the code cause It's not a visible html tag enter link description here

-----edit The changes I've made above solved the problem of the title and the rows but not the thead.

customize: function ( doc ) {
    processDoc(doc);
    doc.content[0]['text'] = doc.content[0]['text'].split(' ').reverse().join(' ');
  },
        }
        
    ],
    columns: [
        {data: 'id', name: 'id'},
        {data: 'message', name: 'message',targets: '_all',render: function(data, type, row) {
      if (type === 'myExport') {
        return data.split(' ').reverse().join('  ');
      }
      console.log(data);
      return data;
    }},

This might be of help: https://datatables.net/forums/discussion/62636/pdfmake-rtl — annoyingmouse, Jun 28 '22 at 07:57
This solved the problem for me https://stackoverflow.com/questions/61504509/datatable-jquery-export-pdf-shows-arabic-data-in-wrong-direction — rouby65329, Apr 26 '23 at 13:08

score 1 · Accepted Answer · answered Jul 04 '22 at 00:26

This library doesn't support rtl very well.. but you could fix this issues in table body using "render" function in columns option to reverse the content..

the problem is with your table head, because you can't customize table header content..

but I figured out a trick to solve this issue..

the idea is to create two table headers.. one reversed and hidden from the html page.. while the other is not reversed and shown in html, the library will only detect the reversed one and display it in the pdf file

to apply this just add this code to your js file..

let thead = document.getElementsByTagName('thead')[0].children[0]
const reversedHead = thead.cloneNode(true)
thead.parentNode.appendChild(reversedHead)
let headCells = reversedHead.children
Object.keys(headCells).forEach(i=>{
    headCells[i].textContent = headCells[i].textContent.split(' ').reverse().join(' ')
})
reversedHead.setAttribute('hidden',"")

Thank you for code sharing, can you please tell me where should I paste this code in pdfmake.js ? — P.Coder, Aug 27 '22 at 16:26
welcome, and sorry for late answer.. I knew about your commit right now you can paste it in any js file in your page.. just to be executed after rendering table — OMER ANWAR, Sep 17 '22 at 23:37

Arabic sentence for words are reversed on datatables pdfhtml5 "pdfmake"

1 Answers1