reactjs - 如何在@react-pdf/pdfkit 中使用自定义字体

Question

谁能说出如何在 React.js 中添加自定义字体并将其与@react-pdf/pdfkit一起使用。我试图注册这样的自定义字体。

import utils from "./utils";
const SVGtoPDF = require("svg-to-pdfkit");
const PDFDocument = require("@react-pdf/pdfkit").default;
const { Base64Encode } = require("base64-stream");

const generatePDF = async (width, height, canvas, fonts) => {
  const canvasSvg = canvas.toSVG();
  return await new Promise((resolve, reject) => {
    try {
      var doc = new PDFDocument({
        bufferPages: true,
        size: [width * 0.75, height * 0.75],
      });

      utils.getFont(fonts).forEach(async (font) => {
        doc.registerFont(font.family, font.path, font.family);
      });
      
      doc.font("Pacifico").text("Hello Message");
      
      let finalString = "";
      const stream = doc.pipe(new Base64Encode());
      SVGtoPDF(doc, canvasSvg, 0, 0);
      stream.on("data", (chunk) => (finalString += chunk));
      stream.on("end", () => {
        resolve(finalString);
      });
      doc.end();
    } catch (err) {
      reject(err);
    }
  });
};

export default generatePDF;

getFont()函数将返回一个具有类似道具的对象数组

{
  path: "@fonts/Pacifico-Regular.ttf",
  family: "Pacifico",
  weight: "regular",
  style: "normal",
  }

我已将 @font 作为别名添加到保存 .ttf 字体的路径中。所以从技术上讲，正在发生以下情况

doc.registerFont("Pacifico", "src/fonts/Pacifico-Regural.ttf");

我尝试使用这样的字体：

doc.font("Pacifico").text("Hello Message");

但我收到以下错误：

Unhandled Rejection (Error): fontkit.openSync unavailable for browser build

有没有其他方法可以添加字体并在 react-pdf/pdfkit 中使用它？

标签： reactjspdfkitreact-pdf