Açık Kaynak JavaScript PDF Görüntüleyici Kitaplığı

PDFObject nedir?

PDFObject, PDF belgelerini web sayfalarına gömmek için geliştirilmiş ücretsiz ve açık kaynaklı bir JavaScript kitaplığıdır. Bir HTML yerleştirme öğesi oluşturup ardından onu HTML yapısına entegre ederek çalışır. Gömme öğesi daha sonra PDF belgesini işler. PDFObject'in kendisi bir oluşturucu değildir; bunun yerine yerleştirme öğesini oluşturmaya ve onu HTML'nin içine yerleştirmeye odaklanır. PDF'leri tam boyutta veya web sayfasının belirli bölümlerinde görüntülemek için yerleştirme öğeleri oluşturabilir.

PDFObject'in temel özelliklerinden bazıları şunlardır:

• Geri Dönüş Mekanizması: PDFObject'in bir geri dönüş mekanizması vardır; bu nedenle, tarayıcının PDF'leri yerleştirmeyi desteklemediği durumlarda PDFObject, geliştiricilerin PDF'ye bir bağlantı veya gerektiğinde başka bir alternatif mantık sağlamasına olanak tanıyan geri dönüş mantığını otomatik olarak etkinleştirir .
• PDF.js Entegrasyonu: PDFObject, PDF.js ile isteğe bağlı entegrasyon sağlayarak geliştiricilerin, tarayıcının varsayılan PDF'sinden bağımsız olarak PDF'leri yerleştirmesine olanak tanır. izleyici. Bu özellik, tarayıcı PDF belgelerinin HTML'ye gömülmesini desteklemediğinde kullanışlıdır.
• PDF Açık Parametreleri: PDFObject, Adobe'nin tescilli PDF Açık Parametrelerini destekler ve geliştiricilerin PDF görüntüsü için parametreler belirlemesine olanak tanır. Bu, görüntüleme modu ve Adobe'ye özgü diğer ayarlar gibi seçenekleri içerir. Bu parametrelerin tümüne burada ulaşılabilir.

GitHub İstatistikleri

İsim:
Dil:
Yıldızlar:
Çatallar:
Lisans:
Depo en son şu tarihte güncellendi:

PDFObject'e Başlarken

Npm modülünü kullanarak PDFObject kütüphanesini indirebiliriz:

npm i pdfobject

Tarayıcı Desteği Doğrulaması ile PDF'yi HTML'ye Gömme

PDFObject kütüphanesini kullanarak bir PDF belgesini HTML'ye gömebiliriz. Başlangıçta tarayıcının, PDFObject kitaplığının supportsPDFs yöntemini kullanarak PDF belgesini HTML'ye gömmeyi destekleyip desteklemediğini kontrol edeceğiz. HTML'ye PDF yerleştirmeyi desteklediğini belirten true değerini döndürürse, embed("document_name.pdf","#elementid") yöntemini kullanarak PDF'yi HTML'ye gömeceğiz. Bu işlev PDF'yi HTML'deki belirli bir öğeye gömecektir. Tam boyutlu PDF yerleştirme için herhangi bir öğe kimliğinden bahsetmeyeceğiz ve yöntemi embed("document_name.pdf") olarak adlandıracağız. Ancak, HTML'ye PDF yerleştirmeyi desteklemediğini belirten false değerini döndürürse, gerektiği gibi diğer alternatif mantığa geçeceğiz. Ayrıntılar için aşağıdaki kod parçacığını kontrol edin:

Çıktı

Aşağıdaki çıktı HTML'ye gömülü PDF belgesini görüntüler:

Geri Dönüş Mekanizması Oluşturun

Tarayıcı PDF'yi HTML'ye gömmeyi desteklemediğinde etkinleştirilen PDFObject'i kullanarak bir web sayfasına PDF gömerken bir geri dönüş mekanizması oluşturabiliriz. PDFObject, embed işlevini çağırırken alternatif bir mantık içeren fallbackLink adlı bir parametreyi kullanır. Dolayısıyla, bir tarayıcı PDF yerleştirmeyi desteklemiyorsa fallbackLink'te bulunan kod, belirlenen div öğesinde yürütülür. Ayrıntılar için aşağıdaki kod parçacığını kontrol edin:

Çıktı

Çıkış ekran görüntüsü, geri dönüş mekanizması tarafından görüntülenen içeriği görüntüler. Tarayıcı, PDF'lerin HTML'ye gömülmesini desteklemediğinde geri dönüş mekanizması etkinleştirildi.

PDF'yi Adobe'nin PDF Açık Parametreleriyle Gömme

PDFObject kütüphanesini kullanarak PDF'leri bazı açılış parametreleriyle birlikte gömebiliriz. PDF belgesini açılış parametreleriyle birlikte HTML'ye gömmek için PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parametreler }}) yöntemini kullanacağız . Bu PDF Açma Parametreleri, PDF'yi açma ve belirli bir sayfa numarasına kaydırma gibi özellikleri içerir. Ayrıntılar için aşağıdaki kod parçacığını kontrol edin:

Çıktı

Aşağıdaki ekran görüntüsü, HTML'ye gömülü PDF belgesini, yerleştirme öğesinin oluşturulduktan sonra 3 numaralı sayfaya kaydırılmasını sağlayan ek parametrelerle birlikte gösterir:

PDF.js'yi entegre ederek PDF'yi gömün

Bildiğimiz gibi PDFObject, PDF'leri HTML'ye gömmek için tarayıcının desteğine bağlıdır, ancak tarayıcı desteklemiyorsa PDF'leri işlemek için alternatif bir yöntem sağlar. Alternatif yöntem ise PDF.js'yi PDFObject ile entegre etmektir. Bunu yapabilmek için sunucumuzda PDF.js'yi kurmamız gerekecek ve ardından ForcePDFJS: true ve PDFJS_URL: path/to/viewer.html/in/pdf'yi ileteceğiz .js parametrelerini embed işlevine ekleyin.

Not: Aşağıdaki örnek kod pasajında, PDF.js kitaplığını içeren bir sunucu oluşturduk ve başlattık; böylece http://localhost:8888, PDF.js kitaplığını işaret eder.

Çıktı

Aşağıdaki ekran görüntüsü, PDFObject'in PDF.js ile entegre edilmesiyle oluşturulan PDF belgesini göstermektedir:

Çözüm

Sonuç olarak PDFObject, PDF belgelerini HTML'ye gömmek için kullanımı kolay bir JavaScript kitaplığıdır. Bir oluşturucu olarak çalışmaz ve tarayıcının yerleştirme öğelerini desteklemesine dayanır; bu da yerleştirme öğesini desteklemeyen tarayıcılarda bozuk kullanıcı arayüzü gibi sorunlara neden olabilir; ancak kitaplık, destek algılama yoluyla bu tür sorunları çözecek özelliklere sahiptir. yerleştirme öğesi ve geri dönüş mekanizması. PDF.js'yi PDFObject ile entegre ederek PDF'leri yerleştirme öğelerini desteklemeyen tarayıcılarda da oluşturabiliriz. Sınırlamalarına rağmen PDFObject, PDF belgelerini web sayfalarına gömmek ve oluşturmak için değerli bir araç olarak öne çıkıyor.

Benzer Ürünler