我在一個需要將網頁內容匯出為 pdf 的網站上作業，但它必須遵守以下條件：
- 背景必須完全列印在每一頁上
- 內容不得與背景重疊
由于該網站使用 PHP，我嘗試使用我之前在另一個具有相同條件的 PHP 網站上使用的 mPDF。即使頁面沒有完全填滿內容，mPDF 也會在 pdf 檔案的每一頁上顯示完整的背景，我可以設定影響內容的邊距，而不是仍然覆寫整個頁面的背景。
遺憾的是，mPDF 不適用于這個新網站，很可能是因為它使用了引導程式和 flex 布局（它回傳給我一個大約一千頁的 pdf，大部分是空白的，其他頁面的頁面部分非常放大），最重要的是部分內容在將其呈現給用戶之前由 javascript 更改，而 mPDF 沒有考慮到這一點（我注意到那是我洗掉 bootstrap.css 時，它允許我查看轉換結果）。
所以我切換到 puppeteer https://github.com/puppeteer/puppeteer，它在引擎蓋下使用 chrome 列印內容就好了，但我遇到了一些問題。第一個問題是我無法在每一頁上列印完整的背景，但是我在寫這個問題時通過創建一個 div 解決了這個問題position: fixed，width并height在100%那里作為背景
第二個問題是，當我在 puppeteer 中設定邊距（最終與 chrome 中的列印邊距相同）時，它們也會影響背景（即使在創建固定 div 之前這也是一個問題）所以我找不到讓文本不與背景重疊的方法
在這里你可以看到一個例子：https : //stackblitz.com/edit/web-platform-vlfqfz?file=index.html
如果您在另一個選項卡中打開預覽并嘗試列印它，您可以看到我面臨的問題
uj5u.com熱心網友回復：
所以，顯然不可能做我在這個問題中確切提出的問題，所以我找到了一個替代解決方案。
我剪切了背景的頂部和底部，并將它們用作 puppeteer 的頁眉和頁腳中的影像。花了一段時間才使影像與position: fixed作為背景的div重合（現在只包含背景的側面），但在身體上設定固定寬度就可以了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/367318.html