javascript - 单词的阿拉伯语句子在数据表上颠倒了 pdfhtml5 "pdfmake"

Question

我已将默认字体更改为支持阿拉伯语的字体应该以这种方式显示的话:

تقارير حرو الرسائل

但它们显示为

الرسائل حركو توارير

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
            },
        ]
    });
  
  });

我遵循了这样的代码，但把它变成了阿拉伯语我不知道在代码中将 direction="rtl"放在哪里，因为它不是可见的 html 标签 enter link description here

-----编辑我在上面所做的更改解决了标题和行的问题，但没有解决 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;
    }},

Answer 1

这个库对 rtl 的支持不是很好..但是你可以在表体中使用列选项中的“render”函数来反转内容来解决这个问题..

问题出在你的表头上，因为你不能自定义表头内容..

但我想出了一个解决这个问题的技巧..

想法是创建两个表格标题..一个反转并隐藏在 html 页面中..而另一个未反转并以 html 显示，库将仅检测反转的一个并将其显示在 pdf 文件中

要应用它，只需将这段代码添加到您的 js 文件中。

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',"")