向Puppeteer PDF渲染器添加字体 [英] Adding fonts to Puppeteer PDF renderer

问题描述

背景

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

I am using Puppeteer in an express application that is running in a Docker image. It is necessary for us to run in Docker because of needed dependencies that Debian needs which we do not have access to install. Using Docker allows us to install what we need.

我们已经看到很多人在将字体正确呈现到PDF中时遇到困难，在每种情况下，我都以接近此的方式安装字体始终是答案，

We have seen a lot of people have problems getting their fonts to render in the PDFs correctly and in every case I have seen, installing the font in a way close to this is always the answer,

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

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

In that case they are installing specific fonts that there happens to be an apt-get for. I have seen others install the default Puppeteer fonts with RUN apt-get install -yyq fonts-liberation as well.

代码示例

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目录中，

We need to install about 10 fonts that different parts of are application will use on different occasions. We have the ttf and the woff files for this. We decided to add them to the system in the way that appears to be what apt-get is doing with the other fonts we have seen people install. We did this by adding our fonts to the Debian directory,

/ usr / local / share / fonts

/usr/local/share/fonts

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

We can see the fonts are setup correctly in the system by running,

fc-list

当我们添加这样的字体时，它们不会渲染。取而代之的是，我们在这些字体所在的位置得到了奇怪的符号。

When we add the fonts like this, they do not render. Instead we get weird symbols where these fonts should be.

示例

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

We are adding our fonts like this using the Dockerfile,

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

问题

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

Since we have a bunch of ttf and woff font files that need to be rendered in PDFs using Puppeteer, what is the correct way to add them to our Debian image that is running in Docker so that Puppeteer will use them as expected?

推荐答案

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

This is a sample script which goes and captures screenshot and pdf on website. Both serves same purpose on this question, to show the fonts works.

(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和各种清理技巧之类的多余东西，因为这里不需要。 p>

Here is the minimal dockerfile, this is very minimal, it doesn't include anything extra like dumb-init and various cleanup hacks as it's not required here.

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

Upon running, here is how Japanese Quora is showing on puppeteer, it is showing like this because fonts are missing.

。

由于它基于jessie，因此我们可以使用一些不同的命令来安装字体。

Since it is based on jessie, and we can install fonts using few different commands.

下面将安装一些带有日语字符的字体。

The below will install some fonts with Japanese characters in it.

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

从目录复制字体

如果我在fonts目录中包含字体，则命令为

Copy fonts from directory

If I have the fonts inside fonts directory, then the command is,

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

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

That's really straightforward. However the fonts will still not work because the font cache is not updated that fast enough. Adding the following will make sure it's updated.

RUN mkfontscale && mkfontdir && fc-cache

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

That's it! Let us run the script again.

< img src = https://i.stack.imgur.com/wtLgx.png alt =在此处输入图片描述>

这篇关于向Puppeteer PDF渲染器添加字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！