在 jspdf-autotable header 阿拉伯语文本中断

Question

 document.autoTable({
      head,
      body,
      startY: XX,
      styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2, font: 'Helvetica' },
      headStyles: { fillColor: '#ffffff', textColor: '#333333', font: 'Helvetica' },
      bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 }
    });

head am passing as below:
const head = [{
        content: "طيران الإمارات",
        styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 },
      },
      {
        content: 'Miles',
        styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
      },
      {
        content: 'Tier Miles',
        styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
      }
      ];

使用 Helvetica 字体，标题文本显示为特殊字符。 Special Characters

使用自定义字体它以阿拉伯语显示，但字不正确我已经通过 header 这个“طيران الإمارات” 但在 pdf 中它显示为这个 طير لإما Breaking word

Answer 1

headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }

你必须在 headStyles 对象中添加 fontStyle

Answer 2

转到 google 字体并下载 Amiri font（我尝试过其他阿拉伯语字体，但由于某种原因它们不起作用）。
前往 this converter tool 将您的字体转换为 base64 并下载生成的 JavaScript 文件（转换您的 Amiri 字体时，上传一个 .ttf 文件每次而不是完整的 .zip 文件夹，否则你会得到一个错误。如果你想添加更多的字体变体上传并单独添加它们）。
转到您的项目并导入下载的文件（如果您不使用模块，则手动添加脚本标签）。

import "./fonts/Amiri";

// .... here goes your code working with the table.

如果您使用 jspdf-autotable library，请将以下代码添加到其配置中：

const jsPDFDoc = new jsPDF();

jsPDFDoc.autoTable({
  html: "#my-table",
  useCss: true,
  theme: "grid",
  headStyles: { font: "Amiri" }, // For Arabic text in the table head
  bodyStyles: { font: "Amiri" }, // For Arabic text in the table body
});

带有自动表的完整示例如下所示：

import { jsPDF } from "jspdf";
import "jspdf-autotable";
import "../../../fonts/Amiri";

const jsPDFDoc = new jsPDF();

jsPDFDoc.autoTable({
  html: "#my-table",
  useCss: true,
  theme: "grid",
  headStyles: { font: "Amiri" },
  bodyStyles: { font: "Amiri" },
});

在 jspdf-autotable header 阿拉伯语文本中断

in jspdf-autotable header arabic text breaking

jspdf

jspdf-autotable