NextJS 15+Turbo单仓中使用PDF-Lib的drawText生成PDF报错

问题原因 #

pdf-lib从零创建PDF时，不会自动嵌入字体资源。drawCircle这类图形绘制无需字体支持，因此能正常生成PDF；但drawText依赖字体渲染文本，缺少字体时就会触发该错误。

解决步骤 #

1. 嵌入pdf-lib提供的标准字体（如Helvetica），或加载自定义字体文件
2. 将嵌入的字体关联到drawText的配置参数中

修改后的代码示例 #

import { useState } from 'react';
import { PDFDocument, PageSizes, rgb, StandardFonts } from 'pdf-lib';
import { Button } from '@/components/ui/button';
import Link from 'next/link';

export const CollaborationPdf = () => {
  const [pdfBlobUrl, setPdfBlobUrl] = useState<string | null>(null);

  const generatePdf = async () => {
    try {
      const pdfDoc = await PDFDocument.create();
      // 嵌入标准Helvetica字体
      const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);

      const page = pdfDoc.addPage(PageSizes.A4);
      page.drawCircle();
      const { width, height } = page.getSize();

      const secondPage = pdfDoc.addPage();
      secondPage.drawText("Hello, World!", {
        x: width / 2,
        y: height / 2,
        size: 30,
        color: rgb(0, 0, 0),
        font: helveticaFont, // 指定使用嵌入的字体
      });

      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: "application/pdf" });
      const blobUrl = URL.createObjectURL(blob);
      setPdfBlobUrl(blobUrl);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  return (
    <div>
      {!pdfBlobUrl && (
        <Button variant="outline" size="sm" onClick={generatePdf}>
          Generate PDF
        </Button>
      )}
      {pdfBlobUrl && (
        <Link href={pdfBlobUrl} target="_blank" rel="noopener noreferrer">
          <Button variant="outline" size="sm">
            View PDF
          </Button>
        </Link>
      )}
    </div>
  );
};

额外说明 #

• 若需使用自定义字体（如思源黑体），可通过fetch加载本地或远程的.ttf/.otf字体文件，再调用pdfDoc.embedFont()完成嵌入
• Turbo单仓项目中需注意静态字体文件的路径配置，确保能正常加载

内容的提问来源于stack exchange，提问作者Lucas P.