如何使用jsPDF和pdf-autotable在react应用程序中生成包含阿拉伯语和英语内容的pdf？

Question

目前，我正在使用 jsPDF 和 pdf-autotable 使用对象数据以编程方式生成 pdf。我正在使用 Amiri 字体并转换为 base64，这给了我一个 js 文件。我有导出的字体变量，并将其导入到我在 React 组件之一中具有 ExportPdf 函数的组件中。

这是我当前的实现。

  const exportToPdf = (demographicsInfo) => {
const pdf = new jsPDF();
const lineHeight = 10;

// Set up the initial position for the layout
let currentY = lineHeight;

pdf.addFileToVFS('Amiri-Regular.ttf', amiriFont);
pdf.addFont('Amiri', 'Amiri', 'normal');
pdf.setFont('Amiri');

  
pdf.autoTable({
  startY: currentY,
  head: [['Key', 'Value']],
  headStyles: { fontStyle: "Amiri" }, // For Arabic text in the table head
  bodyStyles: { fontStyle: "Amiri" },
  body: Object.keys(demographicsInfo).map((key) => [key, demographicsInfo[key]]),
});
pdf.save('exportedData.pdf');

};

顺便说一句，我已经在顶部导入了amiriFont。

不知道为什么这不起作用。与字体相关的文件是 public/fonts 文件夹。我已经尝试了所有可能性并进行了全面搜索。

有人可以帮助我做错的地方吗？

Answer 1

要使用 jspdf-autotable 更改字体，请使用

font

而不是

fontStyle

设置。