Question

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

但是，字体真棒图标不会显示。我只有两个CSS文件：framework.css（使用SASS创建并包含自定义样式，引导程序样式和超棒的字体）和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-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;
}

我是否必须告诉木偶戏，它应该专门使用某些字体，还是我想念其他东西？

预先感谢，帕斯卡

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

@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

我对这个问题发表了评论。问题是c("Stack- Overflow") %>% str_replace_all("-\\s[A-Z]", "o")的位置。我建议您执行以下操作：

创建一个about:blank文件夹。
在此处放置字体文件夹。
在此处创建一个empty.html文件。像这样的https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
进行web通话后，const page = await browser.newPage();
现在您的相对路径await page.goto('file://your path/expressed/as/url/web/empty.html');应该可以使用

Answer 2

我通过将特定字体复制到本地文件系统字体文件夹中解决了此问题。在Mac OS上，我必须将所有Font Awesome字体复制到.on('glyphs', function(glyphs, options) { glyphs = glyphs.map((glyph) => { ...glyph, unicode: glyph.unicode[0].codePointAt(0).toString(16).toUpperCase() }); console.log(glyphs, options); })。

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 链接的想法。

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

3 个答案: