向 jsPDF 库添加 utf-8 字体以在 Angular 应用程序中打印 utf-8 阿拉伯语 pdf

Question

我一直在寻找几个小时来启用 jsPDF 库中的 UTF-8 支持，因为它是jsPDF 1.4 中发布的一个新功能，我找不到有用的资源来启用它

我在库中找到了两种方法addFont()&setFont()但官方文档中不清楚如何使用它们来使用新字体 & 如果它们相互依赖

我特别想添加一种支持阿拉伯语的字体，例如 (Roboto) 或任何支持阿拉伯语的基本字体

我正在使用的代码（& 适用于英语 html 但不适用于阿拉伯语）：

printAsPDF() {
    const elementToPrint = document.getElementById('report'); // The html element to become a pdf
    const pdf = new jsPDF();
    pdf.setFont('Helvetica');
    console.log(pdf.getFontList());

    pdf.fromHTML(elementToPrint, 30, 30);

    pdf.save('hello.pdf');
}

默认支持的字体：（输出getFontList()）：

Courier
Helvetica
Symbol
Times
ZapfDingbats
courier
helvetica
symbol
times
zapfdingbats

Answer 1

首先是坏消息：不推荐使用fromHTML，所以尽量不要使用它。

您可以通过设置阿拉伯字体并将其解码为 Base64 来使用它，如下所示：

const AmiriRegular = environment.AmiriRegular.trim();

doc.addFileToVFS('Amiri-Regular.ttf', AmiriRegular);
doc.addFont('Amiri-Regular.ttf', 'Amiri', 'normal');

doc.setFont('Amiri'); // set font
doc.setFontSize(20);

doc.text('?????', 200, 10, { align: 'right', lang: 'ar' });

// Save the PDF
doc.save('Test.pdf');

这里的 AmiriRegular const 是 amiri 字体的 base64 值，您可以在此处解码字体：

字体解码器

好消息：您可以通过运行命令来使用html2pdf

=> npm 安装 html2pdf

然后在设置或不设置页面选项的情况下调用 html2pdf 函数，然后通过调用 save 函数保存文件，这里是一个示例：

const content = `<h1>??? ??? ????? ???? ??? ???? ???? ????</h1>`;

const opt = {
      margin: 1,
      filename: 'Test.pdf',
      image: { type: 'jpeg', quality: 1 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // Save the PDF
    html2pdf().set(opt).from(content).save();

但请记住，html2pdf正在为 html 内容生成一个图像，而不是fromhtml函数

Answer 2

这是因为jspdf不支持utf-8。它声称它是，但理论上仅适用于 text() 方法而不适用于 addHtml() 或 fromHtml()，所以在我看来这是一个笑话。

即使对于文本，text() 方法也不是一个选项。如果文本量较大，它会离开屏幕，而不是创建另一个页面。理论上，您可以使用 splitTextToSize 将文本拆分为数组，计算行数并在满时添加另一个页面...但如果您的情况允许，使用 html2canvas - 制作图像并使用 jspdf addImage() 那么您不必担心编码和字体。

还有我最后的建议。如果可以的话，不要使用 jspdf。