jsPDF && jsPDF AutoTable 将特殊字符打印到 PDF

Question

我正在使用img jsPDF AutoTable库从我的HTML表创建PDF文件，Everythink工作正常，PDF总是创建，但我对我的国家/地区典型的一些特殊字符有疑问。在我的 PDF 文件中，包含这些字符的字符串在打印时没有包含它们，而且，看起来该字符串中的每个字符都用空格分隔。

我无法选择没有这个字符的方式，因为它们包含在例如名称中。我遇到问题的字符是例如 c 和 hook -> č。

下面我给你举个例子，其中第 1、2、3 和 4 行的第一列缺少带有钩子的 c，然后用空格分隔字符。

无c带挂钩的桌子
"/>

你不知道如何解决吗？
我来自捷克共和国，如果有帮助的话（因为字符集）..

Answer 1

在发布 1.4.0 版本后，jsPDF 终于支持了变音符号字符的编码，但在我看来，以一种非常奇怪的方式。

1. 找到包含您需要的字符的字体。假设它将是 Calibri。
2. 转到

   C:\Windows\Fonts\Calibri

   并将

   .ttf

   字体文件复制到桌面。
3. 前往jsPDF FontConverter并选择复制的字体文件。单击创建按钮。
4. 您应该获得包含如下内容的 javascript 文件：

import { jsPDF } from "jspdf"
var font = 'AAEAAAAWAQQAAB...==';
var callAddFont = function () {
  this.addFileToVFS('calibri-normal.ttf', font);
  this.addFont('calibri-normal.ttf', 'calibri', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont]);

this.addFont('calibri-normal.ttf', 'calibri', 'normal');

中的第二个字符串将是你的字体的名称。记住它。

5. 将下载的 javascript 文件添加到您的项目中并导入它：

   import '../utils/calibri-normal';

6. 转到初始化

   jsPDF

   对象并设置字体的位置：

const doc = new jsPDF('p', 'pt', 'a4');
doc.setFont("calibri");    // <-- place here your font name, which you remeber before
//...
doc.save('file001.pdf');

7. 如果您使用 jsPDF Autotable，也将新字体添加到 autotable 设置中：

doc.autoTable({
    head: [['Column1', 'Column2', 'Column3']],
    body: someDataRows,
    styles: {
      font: 'calibri',    // <-- place name of your font here
      fontStyle: 'normal',
    },
    margin: { bottom: 60 }
});

8. 运行您的代码 - 生成的 PDF 应包含具有国家字符集的字体。

Answer 2

您的问题可能与jspdf不支持utf-8有关。请关注本issue中的相关更新。那里还提到了间距问题。生成 pdf 文件的另一个不错的选择是 pdfmake。它完全支持utf-8字符。

Answer 3

到 2023 年，这是我的解决方案：

    let font = null;
    await fetch('/fonts/poppins-v20-latin-ext_latin-regular.ttf')
      .then(response => response.arrayBuffer())
      .then(fontData => {
        // Convert the ArrayBuffer to a base64-encoded string
        const fontDataArray = new Uint8Array(fontData);
        const base64FontData = btoa(String.fromCharCode(...fontDataArray));
        font = base64FontData;
      })
      .catch(err => {
        // Handle the error here
        console.log(err);
      });

    if (!font) return;
    // Add the font to vFS
    doc.addFileToVFS('poppins-v20-latin-ext_latin-regular.ttf', font);

    // Set unicode font
    doc.addFont('poppins-v20-latin-ext_latin-regular.ttf', 'Poppins', 'normal');
    doc.setFont('Poppins');

    doc.text(supplier, 10, 10);
    doc.text(date, 285, 10, {
      align: 'right'
    });
    // Use the autoTable function to create the table
    doc.autoTable({
      head: [headers.map(header => header.prompt)],
      body: tableData,
      startY: 20,
      theme: 'grid', // You can adjust the theme if needed
      styles: { fontSize: fontSize, font: 'Poppins' },
      headStyles: { fillColor: '#fbfbfb' },
      margin: { top: 10, right: 10, bottom: 10, left: 10 },
      didDrawPage: function (data) {
        // Add page numbers
        doc.text('Page ' + doc.internal.getNumberOfPages(), data.settings.margin.left, doc.internal.pageSize.height - 10);
      },
    });