jsPDF和jsPDF AutoTable如何将特殊字符打印到PDF中

Question

我正在使用jsPDF AutoTable库从HTML表格创建PDF文件，一切都正常，PDF总是被创建，但是我有一个问题，涉及到我的国家特有的一些特殊字符。在我的PDF文件中，包含这些字符的字符串会被打印成没有它们的样子，并且更糟糕的是，每个字符串中的每个单个字符看起来都被分隔开了。我不能选择不使用这些字符的方式，因为它们包含在名称中。我遇到问题的字符是带钩的c，例如->č。下面我将给出一个示例，在第1、2、3和4行的第一列中缺少带钩的c，然后字符被空格分隔开。

你对如何解决它没有任何想法吗？
如果需要（由于字符集），我来自捷克共和国。

- Petr Bečka

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 }
});

运行你的代码 - 生成的PDF应包含你的字体和国家字符集。

- 1_bug

---

这个解决方案对我有效。 我不明白为什么你要使用API。我认为这并不必要。 - maverabil

@maverabil：你说的“不需要使用API”是什么意思？如果没有FontConverter，如何将字体文件转换为js文件？ - 1_bug

它对我起作用了。提前谢谢。你帮我省了很多事。 - faramarz razmi

我已经为这个问题苦苦挣扎了数小时，第七步终于让我找到了解决方案。谢谢！ - suchanoob

Answer 2

你的问题可能与jspdf不支持utf-8相关。请关注此问题的更新。其中也提到了间距问题。另一个生成pdf文件的好选择是pdfmake。它完全支持utf-8字符。

- Simon Bengtsson

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);
      },
    });

- Rüzgar