部署到Heroku (Ubuntu)的木偶师不使用Times字体下载PDF

Question

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

这里是我的木偶词典打印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字体：

​

我的项目使用“基于Ubuntu20.04”的Heroku-20堆栈部署到一个免费的dynos中。我从未使用过Linux，我担心这可能是问题的根源。

部署后，web应用程序将正确显示firefox中的字体：

​

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

​

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

Answer 1

按照Heroku支助小组的说法：

库ttf-mscorefonts-installer有一个没有运行的后安装脚本(安装字体)，因为我们在apt构建包中使用了dpkg -x (提取)而不是dpkg -i (安装)。安装程序正在下载和解压缩，但实际上没有发生任何有价值的事情。有两种解决办法：

• 手动下载字体并将其添加到回购程序中，并让Puppeteer调用该字体，或
• 使用不同的字体，可能已经由Ubuntu提供( dyno中的fc-list显示已安装的字体)，或者更容易下载和安装。

对于我的具体用例，通过将字体添加到我的构建中并通过CSS链接解决了这个问题。我发现这个博客很有帮助：将字体添加到您的反应性应用程序的3种快速方法

Answer 2

微软字体在Ubuntu上是不可用的。您可以安装套餐以获得Times、Arial和其他前杯状微软字体。

在Heroku，你可以通过Apt构建包

1. 首先，将buildpack添加到应用程序中： heroku构建包:add 1 heroku社区/apt
2. 然后，添加一个Aptfile，列出您希望安装的包。Apt不执行依赖关系解析，因此您可能必须手动包含一些依赖项。 像这样的事情应该可以做到： 电缆萃取ttf.mscorefonts.安装程序wget xfonts.utils
3. 最后，提交您的Aptfile并重新部署。