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

Question

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

但是，字体很棒的图标不会显示。 我只有两个 CSS 文件：framework.css（使用 SASS 创建并包含自定义样式、引导程序样式和 font-awesome）和打印媒体（包含打印媒体 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 字体的 fonts 文件夹，@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

正如我对这个问题的评论。 问题是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/ ，应该可以工作

Answer 2

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

Answer 3

我已经将字体真棒 css 嵌入到 HTML 标题中。 它对我有用。

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

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