部署到 Heroku (Ubuntu) 的 Puppeteer 不会使用 Times New Roman 字体下载 PDF

Question

我正在开发一个需要使用 Puppeteer 查看网页并将其下载为 PDF 供最终用户使用的应用程序。我正在使用 express.js 作为服务器。我遇到的问题是，当在 Windows 上进行本地开发时，我的 PDF 下载看起来就像它们所基于的源网页一样，但是当我将应用程序部署到使用 Ubuntu 环境，字体由 Times New Roman 改为 sans-serif.

这是我的 Puppeteer 打印 pdf 代码的片段：

async function printPdf(url) {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
    ],
  })
  const page = await browser.newPage()
  await page.goto(url, {waitUntil: 'networkidle0'})

  const pdf = await page.pdf({ format: 'A4' })
  await browser.close()

  return pdf
}

当我在 Windows 10 中进行本地开发时，PDF 下载正确：

localhost：PDF 引用的 firefox 源视图：

localhost：生成的 PDF 下载，正确使用 Times New Roman 字体：

我的项目使用 Heroku-20 Stack 部署到一个免费的 dynos，它“基于 Ubuntu 20.04”。我从未使用过 Linux，我担心这可能是问题的根源。

部署后，Web 应用程序在 Firefox 中正确显示字体：

但PDF下载使用font-family: sans-serif：

如何确保部署在 Linux 环境中的应用程序下载使用 Times New Roman 字体的 PDF？

Answer 1

Microsoft 字体在 Ubuntu 上不可用。您可以安装 the ttf-mscorefonts-installer package 以获取 Times New Roman、Arial 和其他 Calibri 之前的 Microsoft 字体。

在 Heroku 上，您可以通过 the Apt buildpack:

首先，将构建包添加到您的应用程序：

heroku buildpacks:add --index 1 heroku-community/apt

然后，添加 Aptfile 列出您要安装的软件包。 Apt buildpack 不进行依赖解析，因此您可能必须手动包含一些依赖项。

应该这样做：
```
cabextract
ttf-mscorefonts-installer
wget
xfonts-utils
```
最后，提交您的 Aptfile 并重新部署。

Answer 2

根据 Heroku 支持团队：

库 ttf-mscorefonts-installer 有一个 post-install 脚本（安装字体）不是运行因为我们使用 dpkg -x（提取）而不是 dpkg -i（安装）在 apt buildpack 中。正在下载并解压缩安装程序，但实际上并没有发生任何有价值的事情。有两种解决方法：

手动下载字体并将其添加到存储库并让 Puppeteer 调用它，或者
使用不同的字体，也许 Ubuntu 已经提供（dyno 中的 fc-list 显示已安装的字体）或者更容易下载和安装。

对于我的特定用例，通过将字体添加到我的构建并通过 CSS 链接它来解决问题。我发现此博客post 很有帮助：3 quick ways to add fonts to your React app

部署到 Heroku (Ubuntu) 的 Puppeteer 不会使用 Times New Roman 字体下载 PDF

Puppeteer deployed to Heroku (Ubuntu) does not download PDF using Times New Roman font

pdf

heroku

express

puppeteer