将字体添加到Puppeteer PDF渲染器

Question

背景

我在以Docker映像运行的快速应用程序中使用Puppeteer。由于Debian需要我们无法安装的依赖，因此我们有必要在Docker中运行。使用Docker可以使我们安装所需的东西。

我们已经看到很多人在将字体正确显示在PDF中时遇到问题，在我所见的每种情况下，以接近这种方式安装字体始终是答案，

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

在这种情况下，他们将安装恰好适合的特定字体apt-get。我看到其他人也安装了默认的Puppeteer字体RUN apt-get install -yyq fonts-liberation。

代码示例

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字体文件需要在PDF文件使用木偶呈现，是什么将它们添加到在码头工人运行，以便木偶将使用它们能够按照预期的Debian的图像的正确方法是什么？

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在操纵up上的显示方式，它的显示是这样，因为缺少字体。

。

由于它基于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

而已！让我们再次运行脚本。