如何使用jspdf html方法更改从html元素生成的pdf的字体

Question

我正在尝试更改从 HTML 元素生成的 pdf 的字体

我尝试添加字体，并设置

fontFaces

属性，并更改了

@font-face

CSS

当我登录时

doc.getFontList()

它显示 Poppins 字体

但是当我尝试生成 pdf 时，它会向我显示

这是我的代码

                    const doc = new jsPDF({
                      unit: "pt",
                      putOnlyUsedFonts: true,
                    });
                    doc.addFileToVFS("poppins-regular.ttf", font);
                    doc.addFont(
                      "poppins-regular.ttf",
                      "poppins",
                      "normal"
                    );
                    doc.addFileToVFS("poppins-bold.ttf", fontBold);
                    doc.addFont("poppins-bold.ttf", "poppins", "bold");
                    doc.setFont("poppins");
                    const elementToConvert = document.querySelector("#id");
                    console.log(doc.getFontList());
                    doc.html(elementToConvert, {
                      callback: (doc) => {
                        doc.save();
                      },
                      fontFaces: [
                        {
                          family: "poppins",
                          src: [
                            {
                              url: "../public/assets/poppins-regular.ttf",
                              format: "truetype",
                            },
                          ],
                          weight: "normal",
                        },
                        {
                          family: "poppins",
                          src: [
                            {
                              url: "../public/assets/poppins-bold.ttf",
                              format: "truetype"
                            },
                          ],
                          weight: "bold"
                        },
                      ],
                    });

这是我的CSS

@font-face {
  font-family: "poppins";
  src: url("../public/assets/poppins-regular.ttf") format('ttf');
}
#id{
  font-family: "poppins", sans-serif;
}

Answer 1

jsPDF的“.addFileToVFS”方法要求文件为base64格式。以 Base64 格式对字体文件进行编码，然后传递“filecontent”字符串。