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

Question

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

我在库中找到了两种方法addFont() & setFont()但不清楚in the official docs如何使用它们来使用新字体以及它们是否相互依赖

我特别想添加一种支持阿拉伯语的字体，例如(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

首先是坏消息:来自HTML 已弃用，因此请尽量不要使用它。

您可以通过设置阿拉伯字体并将其解码为 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 值，您可以在此处解码字体:

fonts decoder

好消息:您可以使用 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 内容生成图像来自html 功能