使用 jsPDF 从 HTML 内容生成的 PDF 中未应用字体

Question

我正在尝试使用

jsPDF

库将 HTML 内容转换为 PDF。 HTML 文件包含使用

@font-face

和 Base64 编码字体 URL 定义的自定义字体。但是，当我生成 PDF 时，未应用字体，并且 PDF 似乎使用默认后备字体。

这是我的代码示例：索引.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Custom Font PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
      @font-face {
        font-family: 'LSTCNP+Noto Serif Bold';
        src: url('data:font/woff2;charset=utf-8;base64,d09xxaxadfdfdfdfGMg...cAAA==')
          format('woff2');
      }

      @font-face {
        font-family: 'GLQUUO+Noto Serif';
        src: url('data:application/octet-stream;base64,AAEAAAANAIAAAwBQ..AA=') format('truetype');
      }

      .custom-font-bold {
        font-family: 'LSTCNP+Noto Serif Bold';
        font-size: 20px;
        color: #333333;
      }

      .custom-font-regular {
        font-family: 'GLQUUO+Noto Serif';
        font-size: 16px;
        color: #555555;
      }
    </style>
  </head>
  <body>
    <button onclick="convertToPDF()">Generate PDF</button>
    <div id="contentToPrint">
      <p class="custom-font-bold">This is using the Bold Custom Font</p>
      <p class="custom-font-regular">This is using the Regular Custom Font</p>
    </div>

    <script>
      const { jsPDF } = window.jspdf;

      function convertToPDF() {
        const doc = new jsPDF();

        const elementHTML = document.querySelector("#contentToPrint");

        doc.html(elementHTML, {
          callback: function (doc) {
            doc.save("custom-font.pdf");
          },
          margin: [10, 10, 10, 10],
          html2canvas: {
            scale: 0.8, // Adjust scaling factor if needed
          },
          x: 10,
          y: 10,
        });
      }
    </script>
  </body>
</html>

问题：

当我在浏览器中打开 HTML 时，字体会正确呈现。

我尝试过的：

在 @font-face 规则中同时使用 .woff2 和 .ttf 字体。

验证了字体的 Base64 编码。

尝试调整 html2canvas 设置（比例、窗口宽度）。但是，当我使用 jsPDF 生成 PDF 时，不会应用自定义字体，并且会回退到默认系统字体。

这是我的stackblitz链接

如何让 jsPDF 选择 HTML 中定义的自定义字体？我有什么遗漏吗？

提前谢谢您！

Answer 1

Afaik JSPDF 不支持从 CSS 加载自定义字体。

您可以手动加载/注册字体

const {
  jsPDF
} = window.jspdf;

function convertToPDF() {
  const doc = new jsPDF();

  /**
   * register fonts
   */
  doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf', 'Noto Serif', 'normal');
  doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf', 'Noto Serif', 'bold');

  const elementHTML = document.querySelector("#contentToPrint");

  doc.html(elementHTML, {
    callback: function(doc) {
      doc.save("custom-font.pdf");
    },
    margin: [10, 10, 10, 10],
    html2canvas: {
      scale: 0.8, // Adjust scaling factor if needed
    },
    x: 10,
    y: 10,
  });
}

@font-face {
  font-family: 'Noto Serif';
  src: url('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf') format('truetype');
  font-weight: 400
}


@font-face {
  font-family: 'Noto Serif';
  src: url('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf') format('truetype');
  font-weight: 700
}



.custom-font-regular {
  font-family: 'Noto Serif';
  font-size: 16px;
  color: #555555;
}

.custom-font-bold {
  font-family: 'Noto Serif';
  font-size: 20px;
  color: #333333;
  font-weight: 700
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<button onclick="convertToPDF()">Generate PDF</button>
<div id="contentToPrint">
  <p class="custom-font-bold">This is using the Bold Custom Font</p>
  <p class="custom-font-regular">This is using the Regular Custom Font</p>
</div>

下载不会加载片段。另请参阅codepen

使用 jsPDF 从 HTML 内容生成的 PDF 中未应用字体

问题描述投票：0回答：1

1个回答

最新问题

使用 jsPDF 从 HTML 内容生成的 PDF 中未应用字体

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1