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

Question

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

但是，字体超棒的图标不会显示。我只有两个 CSS 文件：framework.css（使用 SASS 创建并包含自定义样式、bootstrap 样式和超棒的字体）和印刷媒体（包含印刷媒体 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 文件夹中，我创建了一个 fonts 文件夹，其中包含 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

正如我对问题的评论。问题是 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

我已经将字体 awesome css 嵌入到 HTML header。它对我有用。

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

我正在使用 setContent 方法提供 HTML 内容，但我可以在包含上述 link 之前在 HTML 上看到图标，我不喜欢依赖这个想法外部 css link.

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

PDF created with puppeteer not showing font-awesome icons

javascript

pdf

fonts

webautomation

puppeteer