带有自动插件表的 jsPDF 不遵循 html 元素属性值(例如 <html dir="rtl" lang="ar">

问题描述 投票:0回答:3

亲爱的,

我有下面的 HTML 页面

<html dir="rtl" lang="ar">

用这张简单的桌子

<table id="my-table">

    <tr>
      <th>الشهر</th>
      <th>المدخرات</th>
    </tr>

    <tr>
      <td>يناير</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>فبراير</td>
      <td>$80</td>
    </tr>

</table>

将 jsPDF 与 autotable 插件一起使用

function htmlToPDF() {
    const doc = new jsPDF({ filters: ['ASCIIHexEncode'] });

      doc.autoTable({
        html: '#my-table',
        theme: 'grid',
        styles: {
            font: 'Amiri',
            halign: 'right'
        },

      })

    doc.save('report.pdf');
}
</script>

即使我将 html 方向设置为上面显示的 rtl,它仍然以 ltr 方向保存文件

我尝试将 dir 属性放在不同的 HTML 元素中,例如

<HTML>
<body>
<div>
<table>

没有成功

任何帮助将不胜感激

谢谢

更新: 我找到了这个

doc.viewerPreferences({"Direction" : "R2L"}, true);

但是也没用!

javascript html css jspdf jspdf-autotable
3个回答
1
投票

我不得不使用 JQuery 反转克隆对象中表的列

var rtlTable = $('#html-table').clone();
rtlTable.find('tr').each(function () {
    var tds = $(this).children('td,th').get().reverse();
    $(this).append(tds);
});

然后我将 html 元素传递给 autotable 函数

var pdf = new jsPDF();
pdf.autoTable({html: rtlTable.get()[0], styles: { halign: "left" });
pdf.save("reprt.pdf");

1
投票

我找到了适合我的解决方案。

我使用了@user3723572 的一部分很棒的解决方案 + 我为其他想要实现与我相同目标的人添加了 utf8 支持。

我的目标是创建一个包含希伯来字母 (UTF-8) + RTL 的表格。 首先,我加载了我想要的字体(如果你想使用 doc.text() 和 utf8 字母,这是必须的)。

然后我将 jspdf 设置为 rtl + 反转我表中的所有列。

var doc = new jsPDF();
doc.setFont("VarelaRound-Regular"); //hebrew font
doc.setFontType("normal");
doc.setR2L(true); //RTL 
var rtlTable = $('#table').clone(); // clone the required table 
rtlTable.find('tr').each(function () { //reverse the row's columns order
    var tds = $(this).children('td,th').get().reverse();
    $(this).append(tds);
});
 
doc.autoTable({
    html:rtlTable.get()[0],
    startY: 10,
    styles: {halign:'center',font: "VarelaRound-Regular",fontStyle:"normal",fontSize:6,cellPadding:{top: 1, right: 0.5, bottom: 1, left: 0.5}} 
 });
 doc.save("a4.pdf");

您可以在此处查看如何设置新字体 - https://github.com/MrRio/jsPDF 在使用 Unicode 字符/UTF-8 下: 节。


0
投票

我找到的方法。 使用 React 而不使用 jQuery。

我使用的格式适合大(宽)表。

    const tableRef = useRef<HTMLTableElement>(null);

    const ReverseTable = () => {
        const rtlTable = tableRef.current?.cloneNode(true) as HTMLTableElement;

        if (rtlTable) {
            Array.from(rtlTable.querySelectorAll('tr')).forEach((tr) => {
                const tds = Array.from(tr.querySelectorAll('td, th')).reverse();
                tds.forEach((td) => tr.appendChild(td));
            });
        }

        const doc = new jsPDF({orientation: 'landscape', format: [297, 420]});
        doc.addFont('fonts/noto_sans_hebrew.ttf', 'NotoSansHebrew', 'normal');
        doc.setFont('NotoSansHebrew');
        doc.setLanguage('he');
        autoTable(doc, {
            html: rtlTable as HTMLTableElement,
            theme: 'grid',
            startY: 20,
            margin: { top: 10 },
            styles: {
                font: 'NotoSansHebrew',
                fontSize: 10,
                cellPadding: 2,
                lineWidth: 0.1,
                lineColor: [204, 204, 204],
                halign: "left"
            },
        })
        doc.save('fileName.pdf');
    }

© www.soinside.com 2019 - 2024. All rights reserved.