javascript - 用 puppeteer 创建的 PDF 不显示 Font Awesome 图标

Question

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

但是， Font Awesome 图标不会出现。我只有两个 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

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