使用 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 字体的 fonts 文件夹，@font-face 引用了此路径：

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);

我是否必须告诉 puppeteer 它应该专门使用一些字体，或者我是否错过了其他内容？

提前致谢，帕斯卡

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

@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;
}

Answer 1

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

• 创建一个web文件夹。
• 把你的字体文件夹放在那里。
• 在那里创建一个空的.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/应该可以工作