亲爱的,
我有下面的 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);
但是也没用!
我不得不使用 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");
我找到了适合我的解决方案。
我使用了@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 下: 节。
我找到的方法。 使用 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');
}