我正在開發一個需要使用 Puppeteer 來查看網頁并將其作為 PDF 下載給最終用戶的應用程式。我使用 express.js 作為服務器。我遇到的問題是，在 Windows 上進行本地開發時，我的 PDF 下載看起來就像它們所基于的源網頁，但是當我將應用程式部署到使用基于 Ubuntu 的環境的 Heroku 時，字體發生了變化從 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 字體：
我的專案使用“基于 Ubuntu 20.04”的
但 PDF 下載使用font-family: sans-serif：
如何確保我在 Linux 環境中部署的應用程式使用 Times New Roman 字體下載 PDF？
uj5u.com熱心網友回復：
開箱即用的 Ubuntu 上不提供 Microsoft 字體。您可以安裝該ttf-mscorefonts-installer軟體包以獲取 Times New Roman、Arial 和其他 Calibri Microsoft 之前的字體。
在 Heroku 上，您可以通過Apt buildpack執行此操作：
首先，將 buildpack 添加到您的應用程式中：
heroku buildpacks:add --index 1 heroku-community/apt然后，添加
Aptfile要安裝的軟體包的串列。Apt buildpack 不進行依賴決議，因此您可能必須手動包含一些依賴項。這樣的事情應該這樣做：
cabextract ttf-mscorefonts-installer wget xfonts-utils最后，提交
Aptfile并重新部署。
uj5u.com熱心網友回復：
根據 Heroku 支持團隊：
該庫ttf-mscorefonts-installer有一個未運行的安裝后腳本（用于安裝字體），因為我們在 apt buildpack 中使用dpkg -x（提取）而不是（安裝）。dpkg -i安裝程式正在下載和解壓，但實際上沒有發生任何有價值的事情。有兩種解決方法：
- 手動下載字體并將其添加到 repo 并讓 Puppeteer 呼叫它，或者
- 使用不同的字體，也許是 Ubuntu 已經提供的字體（dyno 中的 fc-list 顯示已安裝的字體），或者更容易下載和安裝。
對于我的特定用例，通過將字體添加到我的構建并通過 CSS 鏈接它來解決問題。我發現這篇博文很有幫助：3 種快速向 React 應用添加字體的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/415055.html
標籤：