Web Uygulamanızdan PDF Nasıl Oluşturulur

Yayınlanan: 2022-03-10
Hızlı özet ↬ Bir web uygulamasından PDF oluşturmak söz konusu olduğunda çok çeşitli seçenekler vardır. Bu makalede, Rachel Andrew mevcut araçlara bir göz atıyor ve sizin için en uygun aracı bulmanıza yardımcı olacak önerilerini paylaşıyor.

Birçok web uygulamasının, kullanıcıya PDF formatında bir şey indirme yeteneği verme gereksinimi vardır. Uygulamalar (e-ticaret mağazaları gibi) söz konusu olduğunda, bu PDF'ler dinamik veriler kullanılarak oluşturulmalı ve kullanıcının hemen kullanımına sunulmalıdır.

Bu makalede, anında bir web uygulamasından doğrudan PDF oluşturabileceğimiz yolları keşfedeceğim. Kapsamlı bir araç listesi değil, bunun yerine farklı yaklaşımları göstermeyi hedefliyorum. Favori bir aracınız veya paylaşmak istediğiniz herhangi bir deneyiminiz varsa, lütfen bunları aşağıdaki yorumlara ekleyin.

HTML ve CSS ile Başlamak

Web uygulamamız muhtemelen PDF'imize eklenecek bilgileri kullanarak zaten bir HTML belgesi oluşturuyor. Bir fatura durumunda, kullanıcı bilgileri çevrimiçi olarak görüntüleyebilir ve ardından kayıtları için bir PDF indirmek için tıklayabilir. Sevk irsaliyeleri oluşturuyor olabilirsiniz; bir kez daha, bilgi zaten sistem içinde tutulmaktadır. İndirmek ve yazdırmak için bunu güzel bir şekilde biçimlendirmek istiyorsunuz. Bu nedenle, bir PDF sürümü oluşturmak için bu HTML ve CSS'yi kullanmanın mümkün olup olmadığını düşünmek başlamak için iyi bir yer olacaktır.

CSS'nin yazdırma için CSS ile ilgilenen bir özelliği vardır ve bu Sayfalı Medya modülüdür. “CSS ile Baskı İçin Tasarım” makalemde bu spesifikasyona genel bir bakışım var ve CSS, birçok kitap yayıncısı tarafından tüm basılı çıktıları için kullanılıyor. Bu nedenle, CSS'nin kendisi basılı materyaller için spesifikasyonlara sahip olduğundan, onu kesinlikle kullanabilmeli miyiz?

Bir kullanıcının bir PDF oluşturmasının en basit yolu tarayıcılarıdır. Yazıcı yerine PDF'ye yazdırmayı seçerek bir PDF oluşturulacaktır. Ne yazık ki, bu PDF genellikle tamamen tatmin edici değil! Başlangıç ​​olarak, bir web sayfasından bir şey yazdırdığınızda otomatik olarak eklenen üstbilgilere ve altbilgilere sahip olacaktır. Ayrıca, sahip olduğunuz varsayılarak, baskı stil sayfanıza göre biçimlendirilecektir.

Burada karşılaştığımız sorun, tarayıcılardaki parçalanma belirtiminin yetersiz desteğidir; bu, sayfalarınızın içeriğinin alışılmadık şekillerde bozulduğu anlamına gelebilir. “CSS Fragmentation ile Kutuları Kırmak” başlıklı makalemi araştırdığımda keşfettiğim gibi, parçalanma desteği düzensiz. Bu, üstbilgilerin sayfadaki son öğe olarak bırakılması vb. ile içeriğin uygun olmayan şekilde kesilmesini önleyemeyebileceğiniz anlamına gelir.

Ayrıca, sayfa kenar boşlukları kutularındaki içeriği kontrol etme olanağımız yoktur, örneğin her sayfaya kendi seçtiğimiz bir başlık eklemek veya karmaşık bir faturanın kaç sayfa olduğunu göstermek için sayfa numaralandırması yapmak. Bunlar, Paged Media spesifikasyonunun bir parçasıdır, ancak herhangi bir tarayıcıda uygulanmamıştır.

“2018'de Baskı Stil Sayfalarının Durumuna Yönelik Bir Kılavuz” makalem, tarayıcıların bir baskı stil sayfası kullanarak doğrudan tarayıcıdan yazdırmak için sahip olduğu destek türü açısından hala doğrudur.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Tarayıcı Oluşturma Motorlarını Kullanarak Yazdırma

Tarayıcı görüntü oluşturma motorlarını kullanarak, tarayıcıdaki yazdırma menüsüne gitmeden ve belgeyi yazdırmışsınız gibi üstbilgiler ve altbilgiler ile biten PDF'ye yazdırmanın yolları vardır. Tweetime yanıt olarak en popüler seçenekler wkhtmltopdf ve başsız Chrome ve Puppeteer kullanarak yazdırma idi.

wkhtmltopdf

Twitter'da defalarca bahsedilen bir çözüm, wkhtmltopdf adlı bir komut satırı aracıdır. Bu araç, bir stil sayfasıyla birlikte bir HTML dosyası veya birden çok dosya alır ve bunları bir PDF'ye dönüştürür. Bunu WebKit işleme motorunu kullanarak yapar.

Bu nedenle, esasen, bu araç tarayıcıdan yazdırmakla aynı şeyi yapar, ancak otomatik olarak eklenen üstbilgileri ve altbilgileri alamazsınız. Bu olumlu yönden, içeriğiniz için çalışan bir yazdırma stil sayfanız varsa, bu aracı kullanarak PDF'ye de güzel bir çıktı almalı ve böylece basit bir düzen çok güzel yazdırabilir.

Ne yazık ki, yine de, bir tarayıcı işleme motoru kullanarak yazdırdığınız için, Sayfalı Ortam belirtimi ve parçalanma özellikleri için destek eksikliği açısından doğrudan web tarayıcısından yazdırırken karşılaştığınız aynı sorunlarla karşılaşacaksınız. Paged Media belirtimini kullanarak varsayılan olarak sahip olacağınız bazı eksik özellikleri geri eklemek için wkhtmltopdf'e aktarabileceğiniz bazı işaretler vardır. Ancak bu, iyi HTML ve CSS yazmanın yanı sıra ekstra çalışma gerektirir.

Başsız Krom

Bir başka ilginç olasılık da PDF'ye yazdırmak için Headless Chrome ve Puppeteer kullanmaktır.

Ancak bir kez daha, Sayfalı Medya ve parçalanma için tarayıcı desteği ile sınırlandırılırsınız. page.pdf() işlevine geçirilebilecek bazı seçenekler vardır. wkhtmltopdf'de olduğu gibi, bunlar, tarayıcı desteği olması durumunda CSS'den mümkün olabilecek bazı işlevleri ekler.

Bu çözümlerden birinin ihtiyacınız olan her şeyi yapması iyi olabilir, ancak bir tür savaşta savaştığınızı fark ederseniz, mevcut tarayıcı oluşturma motorlarıyla mümkün olanın sınırlarını aşıyor olmanız muhtemeldir ve daha iyi bir çözüm araması gerekecek.

Sayfalı Medya için JavaScript Çoklu Dolguları

JavaScript kullanarak tarayıcıda Sayfalı Ortam belirtimini yeniden oluşturmaya yönelik birkaç girişim vardır - esas olarak bir Sayfalı Ortam Çoklu Dolgusu oluşturur. Bu, Puppeteer'ı kullanırken size Sayfalı Medya desteği verebilir. paged.js ve Vivliostyle'a bir göz atın.

Bir Yazdırma Kullanıcısı Aracısı Kullanma

Bir HTML ve CSS çözümüyle kalmak istiyorsanız, HTML ve CSS'den yazdırmak için tasarlanmış ve dosyalarınızdan PDF oluşturmak için bir API'si olan bir Kullanıcı Aracısına (UA) bakmanız gerekir. Bu Kullanıcı Aracıları, Sayfalı Ortam belirtimini uygular ve CSS Parçalama özellikleri için çok daha iyi desteğe sahiptir; bu size çıktı üzerinde daha fazla kontrol sağlayacaktır. Önde gelen seçenekler şunları içerir:

  • prens
  • Anten Evi
  • PDFReaktör

Bir baskı UA, belgeleri CSS kullanarak biçimlendirir - tıpkı bir web tarayıcısının yaptığı gibi. CSS için tarayıcı desteğinde olduğu gibi, neyi desteklediklerini öğrenmek için bu UA'ların belgelerini kontrol etmeniz gerekir. Örneğin, Prince (en çok aşina olduğum) Flexbox'ı destekler, ancak yazma sırasında CSS Grid Layout'u desteklemez. Sayfalarınızı kullandığınız araca gönderirken, bu genellikle yazdırma için belirli bir stil sayfasıyla olur. Normal bir baskı stil sayfasında olduğu gibi, sitenizde kullandığınız CSS'nin tümü PDF sürümü için uygun olmayacaktır.

Bu araçlar için bir stil sayfası oluşturmak, belki farklı bir yazı tipi boyutu veya renkleri kullanarak neyin gösterileceği veya gizleneceği konusunda kararlar vererek normal bir baskı stil sayfası oluşturmaya çok benzer. Daha sonra Dipnotlar, sayfa numaraları vb. ekleyerek Sayfalı Ortam belirtimindeki özelliklerden yararlanabilirsiniz.

Bu araçları web uygulamanızdan kullanmak için, bunları sunucunuza yüklemeniz gerekir (bunu yapmak için bir lisans satın almış olmanız gerekir). Bu araçlarla ilgili temel sorun, pahalı olmalarıdır. Bununla birlikte, daha sonra bunlarla basılı belgeler üretebilme kolaylığı göz önüne alındığında, tasarruf edilen geliştirici zamanında kendileri için ödeme yapabilirler.

Prince'i bir API üzerinden, DocRaptor adlı bir servis aracılığıyla, belge başına ödeme bazında kullanmak mümkündür. Bu, pek çok uygulamanın, kendinizinkini barındırmak daha uygun maliyetli olacakmış gibi başlaması için kesinlikle iyi bir yer olacaktır, geçişin geliştirme maliyeti minimum olacaktır.

Yukarıdaki araçlar kadar kapsamlı olmayan ancak ihtiyacınız olan sonuçları iyi bir şekilde elde edebilen ücretsiz bir alternatif WeasyPrint'tir. Paged Media'nın tamamını tam olarak uygulamaz, ancak bir tarayıcı motorundan daha fazlasını uygular. Kesinlikle, denenecek bir tane!

HTML ve CSS'den dönüştürmeyi desteklediğini iddia eden diğer araçlar arasında, cesurca HTML5, CSS3 ve JavaScript'i desteklediğini iddia eden PDFCrowd bulunur. Bununla birlikte, tam olarak neyin desteklendiğine ve Paged Media özelliklerinden herhangi birinin desteklenip desteklenmediğine dair herhangi bir ayrıntı bulamadım. Ayrıca tweetime verilen yanıtlarda bir söz almak mPDF idi.

HTML ve CSS'den Uzaklaşmak

HTML ve CSS kullanmaktan uzaklaşan ve araç için özel çıktılar oluşturmanızı gerektiren bir dizi başka çözüm var. Birkaç JavaScript yarışmacısı aşağıdaki gibidir:

  • jsPDF
  • pdfmake

Öneriler

İçeriğinizin baskı için tamamen farklı bir temsilini oluşturmanızı gerektiren JavaScript tabanlı yaklaşımlar dışında, bu çözümlerin çoğunun güzelliği, birbirlerinin yerine kullanılabilir olmalarıdır. Çözümünüz bir komut satırı aracını çağırmaya ve bu aracı HTML, CSS ve muhtemelen bazı JavaScript'lerinizi iletmeye dayanıyorsa, araçlar arasında geçiş yapmak oldukça kolaydır.

Bu makaleyi yazarken, bir dizi farklı aracı çalıştırabilen bir Python sarmalayıcı da keşfettim. (Araçların zaten kurulu olması gerektiğini unutmayın, ancak bu, çeşitli araçları örnek bir belgede test etmek için iyi bir yol olabilir.)

Paged Media ve parçalanma desteği için Prince, Antenna House ve PDFReactor en üst sıralarda yer alacak. Ticari ürünler olarak, destekle birlikte gelirler. Bütçeniz varsa, PDF'ye yazdırılacak karmaşık sayfalarınız varsa ve sınırlamanız geliştirici süresiyse, büyük olasılıkla bunları PDF oluşturma işleminizin iyi çalışması için en hızlı yol olarak görürsünüz.

Ancak çoğu durumda ücretsiz araçlar işinize yarayacaktır. Gereksinimleriniz çok basitse, wkhtmltopdf veya temel bir başsız Chrome ve Puppeteer çözümü hile yapabilir. Orijinal tweetime cevap veren birçok insan için kesinlikle işe yaradı.

Ancak, istediğiniz çıktıyı elde etmekte zorlanıyorsanız, bunun yanlış yaptığınız bir şey değil, tarayıcıdan yazdırmanın bir sınırlaması olabileceğini unutmayın. Daha fazla Paged Media desteği istiyorsanız, ancak ticari bir ürün alacak durumda değilseniz, belki WeasyPrint'e bir göz atın.

Umarım bu, web uygulamanızdan PDF'ler oluşturmak için kullanılabilecek araçların yararlı bir özetidir. Hiçbir şey değilse de, ilk seçiminiz iyi çalışmıyorsa, çok çeşitli seçeneklerin olduğunu gösterir.

Lütfen yorumlara kendi deneyimlerinizi ve önerilerinizi ekleyin, bu çoğumuzun uğraştığı şeylerden biridir ve paylaşılan kişisel deneyim inanılmaz derecede yardımcı olabilir.

Daha fazla okuma

Web uygulamalarından PDF dosyalarıyla çalışmak için diğer bazı yararlı kaynaklarla birlikte bu makalede bahsedilen çeşitli kaynakların ve araçların bir özeti.

Özellikler

  • Sayfalı Medya modülü
  • parçalanma

Makaleler ve Kaynaklar

  • CSS ile Baskı İçin Tasarım
  • CSS Parçalama ile Kutuları Kırma
  • 2018'de Baskı Stil Sayfalarının Durumuna Yönelik Bir Kılavuz
  • Headless Chrome ve Puppeteer'a Başlarken
  • print-css.rocks

Araçlar

  • wkhtmltopdf
  • paged.js
  • canlı stil
  • prens
  • Anten Evi
  • PDFReaktör
  • DocRaptor
  • WeasyPrint
  • PDFCrowd
  • mPDF
  • jsPDF
  • pdfmake
  • Sunucu Üretin ve Yayınlayın