代码之家 › 专栏 › 技术社区 › wuno

将字体添加到Puppeter PDF渲染器

puppeteer chromium docker express node.js

wuno · 技术社区 · 6 年前

背景

我正在一个运行在Docker映像中的Express应用程序中使用Puppeter。我们有必要在Docker中运行,因为Debian需要依赖项,而我们没有权限安装这些依赖项。使用Docker可以安装我们需要的东西。

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

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

在这种情况下,他们安装的特定字体 apt-get 为了。我见过其他人安装默认的木偶字体 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 文件。我们决定把它们添加到系统中 容易得到 正在使用我们看到的其他字体。我们把字体添加到debian目录中,

/usr/本地/共享/字体

我们可以通过运行

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公司 和 炒锅 需要使用puppeter在pdf中呈现的字体文件,将它们添加到docker中运行的debian映像中以便puppeter按预期使用它们的正确方法是什么?

1 回复 | 直到 6 年前

Md. Abu Taher 6 年前

这是一个样本脚本,它去捕捉截图和网站上的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是如何显示在木偶演员,它是这样显示,因为字体丢失。

是的。

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

运行标准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

就这样!让我们再看一遍剧本。