HTML'yi PDF'ye dönüştürürken / yazdırırken içerik için kenar boşlukları var, ancak her sayfada arka plan yok

0

Soru

Bir web sayfasının içeriğini pdf olarak dışa aktarması gereken bir web sitesi üzerinde çalışıyorum ancak aşağıdaki koşullara uyması gerekiyor:

  • Arka plan her sayfaya tam olarak yazdırılmalıdır
  • İçerik arka planla çakışmamalıdır

Web sitesi PHP kullandığından, daha önce aynı koşullara sahip başka bir PHP web sitesinde kullandığım mpdf'yi kullanmaya çalıştım. mPDF, sayfa tamamen içerikle doldurulmadığında bile pdf dosyasının her sayfasında tam arka planı gösterdi ve içeriği etkileyen kenar boşluklarını ayarlayabildim, ancak yine de tüm sayfayı kaplayan arka planı ayarlayamadım.

Ne yazık ki, mPDF bu yeni web sitesiyle çalışmıyor, büyük olasılıkla bootstrap ve flex düzenleri kullandığı için (bana yaklaşık bin sayfalık, çoğunlukla boş, diğerleri sayfanın çok yakınlaştırılmış parçaları olan bir pdf döndürdü), içeriğin bu bölümünün üstünde kullanıcıya sunmadan önce javascript tarafından değiştirildi ve bu mPDF tarafından dikkate alınmadı (bootstrap'ı kaldırdığımda olduğunu fark ettim.dönüşümün sonucunu görmeme izin veren css).

Ben de kuklacıya geçtim. https://github.com/puppeteer/puppeteer kaputun altındaki chrome'u kullanarak içeriği gayet iyi yazdırıyor, ancak bazı sorunlarım var. İlk sorun, her sayfada tam arka planı yazdıramamamdı, ancak bu soruyu yazarken bir div oluşturarak çözdüm position: fixed ve width ve height yanında 100% bu arka plan olarak çalışır

İkinci sorun, puppeteer'deki kenar boşluklarını ayarladığımda (sonunda chrome'daki kenar boşluklarını yazdırmakla aynıdır) arka planı da etkiliyor (bu, sabit div'i oluşturmadan önce bile bir sorundu) bu yüzden metnin arka planla çakışmaması için bir yol bulamıyorum

Burada bir örnek görebilirsiniz: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

Önizlemeyi başka bir sekmede açıp yazdırmaya çalışırsanız karşılaştığım sorunu görebilirsiniz

google-chrome printing puppeteer
2021-11-23 10:09:26
1

En iyi cevabı

0

Görünüşe göre bu soruda tam olarak sorduğum şeyi yapmak mümkün değil, bu yüzden alternatif bir çözüm buldum.
Arka planın üst ve alt kısmını kestim ve bunları kuklacının üstbilgi ve altbilgisinde görüntü olarak kullandım. Görüntülerin birbiriyle çakışması biraz zaman aldı. position: fixed arka plan görevi gören (şimdi yalnızca arka planın kenarlarını içeren) ancak gövdede sabit bir genişlik ayarlayan div işi yaptı

2021-11-24 15:44:17

Diğer dillerde

Bu sayfa diğer dillerde

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................