用 puppeteer 创建的 PDF 不显示字体真棒图标

Question

我需要创建一个 PDF 缓冲区并将其保存到数据库中。我将完整的 DOM 传递给 puppeteer，其中大部分都可以正常工作。当我打开创建的 PDF 缓冲区时，会应用引导样式并获得精美的 PDF。

但是，字体很棒的图标不会出现。我只有两个 CSS 文件：framework.css（使用 SASS 创建并包含自定义样式、引导样​​式和 font-awesome）和 print-media（包含打印媒体 css 以隐藏或显示导航等内容）。这是我创建 PDF 缓冲区的代码：

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
      executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath +  '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath +  '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);

在 css 文件夹中，我创建了一个包含 font-awesome 字体的字体文件夹，@font-face 指的是这个路径：

@font-face {
  font-family: "FontAwesome";
  src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

我是否必须告诉 puppeteer 它应该专门使用某些字体，还是我错过了其他东西？

提前致谢， 帕斯卡

编辑： 尝试使用绝对路径，但这也行不通。如果我这样做，即使是网站也不会包含字体。

@font-face {
    font-family: "FontAwesome";
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }

Answer 1

我已在 HTML 标头中嵌入了很棒的 css 字体。它对我有用。

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>.

我正在使用 setContent 方法提供 HTML 内容，但在包含上述链接之前，我可以在 HTML 上看到图标，而且我不喜欢依赖外部 css 链接的想​​法。

Answer 2

我通过将特定字体复制到本地文件系统字体文件夹解决了这个问题。在 Mac OS 上，我必须将所有 Font Awesome 字体复制到 ~/Library/Fonts。

Answer 3

正如我对这个问题的评论。问题是about:blank 位置。我建议执行以下操作：

• 创建一个web 文件夹。
• 把你的字体文件夹放在那里。
• 在那里创建一个 empty.html 文件。喜欢这个https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
• 做完const page = await browser.newPage();之后打电话await page.goto('file://your path/expressed/as/url/web/empty.html');
• 现在您的相对路径 "./fonts/ 应该可以工作了