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

Question

背景

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

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

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

在这种情况下，他们正在安装恰好有apt-getfor 的特定字体。我看到其他人也安装了默认的 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/字体

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

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 中呈现，将它们添加到在 Docker 中运行的 Debian 映像中的正确方法是什么，以便 Puppeteer 可以按预期使用它们？

标签： node.jsexpressdockerchromiumpuppeteer

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，它非常小，它不包括任何额外的东西，比如哑初始化和各种清理黑客，因为这里不需要。

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

从目录复制字体

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

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

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

RUN mkfontscale && mkfontdir && fc-cache

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