node.js - 将字体添加到 Puppeteer PDF 渲染器

Question

背景

我在 Docker 镜像中运行的快速应用程序中使用 Puppeteer。我们有必要在 Docker 中运行，因为 Debian 需要我们无法安装的依赖项。使用 Docker 可以让我们安装我们需要的东西。

我们已经看到很多人在让他们的字体在 PDF 中正确呈现时遇到问题，在我见过的每种情况下，以接近于此的方式安装字体始终是答案，

 apt-get install -yq --allow-unauthenticated ttf-mscorefonts-installer

在那种情况下，他们正在安装恰好有一个 apt-get 的特定字体。我看到其他人也使用 RUN apt-get install -yyq fonts-liberation 安装默认的 Puppeteer 字体。

代码示例

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
      ignoreHTTPSErrors: true,
      dumpio: false,
    });
    const page = await browser.newPage();
    await page.goto(
      `http://localhost:3000/${template}?data=${JSON.stringify(req.body)}`,
    );
    const pdfBuffer = await page.pdf({
      format: 'A4',
      margin: {
        top: '20px',
        left: '20px',
        right: '20px',
        bottom: '20px',
      },
    });
    await browser.close();

问题

我们需要安装大约 10 种字体，应用程序的不同部分将在不同场合使用。为此，我们有 ttf 和 woff 文件。我们决定将它们添加到系统中，就像 apt-get 对我们看到人们安装的其他字体所做的那样。我们通过将我们的字体添​​加到 Debian 目录来做到这一点，

/usr/local/share/fonts

我们可以通过运行看到系统中的字体设置正确，

fc-list

当我们像这样添加字体时，它们不会呈现。相反，我们在这些字体应该出现的地方得到了奇怪的符号。

示例

我们正在使用 Dockerfile 添加我们的字体，

RUN apt-get install -yyq fonts-liberation
COPY /fonts/*.ttf /usr/local/share/fonts/
COPY /fonts/*.woff /usr/local/share/fonts/

问题

由于我们有一堆 ttf 和 woff 字体文件需要使用 Puppeteer 在 PDF 中呈现，将它们添加到我们的 Debian 镜像的正确方法是什么在 Docker 中运行以便 Puppeteer 将按预期使用它们？

Answer 1

这是一个示例脚本，用于捕获网站上的屏幕截图和 pdf。两者在这个问题上的目的相同，以显示字体有效。

(async()=>{
  const puppeteer = require('puppeteer')

  const browser = await puppeteer.launch({
    headless: true,
    args: ["--no-sandbox", "--disable-setuid-sandbox"]
  });
  const page = await browser.newPage()
  await page.goto('https://jp.quora.com/')
  await page.screenshot({path: `/shared/_${Date.now()}.png`})
  const pdfBuffer = await page.pdf({path: `/shared/_${Date.now()}.pdf`});

  await browser.close()
})()

这是最小的 dockerfile，这是非常小的，它不包含任何额外的东西，比如 dumb-init 和各种清理黑客，因为这里不需要。

FROM node:8

# Install dependencies
RUN apt-get update && \
apt-get -yq install libatk1.0-0 libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 libasound2 xauth xvfb 

# Cd into /app
WORKDIR /app

# Copy package.json into app folder
COPY package.json /app

# Install dependencies
RUN npm install 

COPY . /app

# Start script on Xvfb
CMD ["xvfb-run","npm","start"]

运行时，这是日语 Quora 在 puppeteer 上的显示方式，它是这样显示的，因为缺少字体。

.

因为它是基于 jessie 的，我们可以使用几个不同的命令来安装字体。

运行标准的apt-get

下面会安装一些日文字体。

RUN apt-get -yq install xfonts-utils fonts-droid xfonts-intl-asian

从目录复制字体

如果我在 fonts 目录中有字体，那么命令是，

COPY fonts/*.* /usr/share/fonts/truetype/

这真的很简单。但是字体仍然无法工作，因为字体缓存的更新速度不够快。添加以下内容将确保它已更新。

RUN mkfontscale && mkfontdir && fc-cache

就是这样!让我们再次运行脚本。