Açık Kaynak JavaScript PDF Görüntüleyici Kütüphanesi

PDFObject nedir?

PDFObject, PDF belgelerini web sayfalarına yerleştirmek için geliştirilmiş ücretsiz ve açık kaynaklı bir JavaScript kütüphanesidir. Bir HTML yerleştirme öğesi oluşturarak ve ardından bunu HTML yapısına entegre ederek çalışır. Yerleştirme öğesi daha sonra PDF belgesini işler. PDFObject kendi başına bir işleyici değildir; bunun yerine yerleştirme öğesini oluşturmaya ve bunu HTML'nin içine yerleştirmeye odaklanır. PDF'leri tam boyutta veya web sayfasının belirtilen bölümlerinde görüntülemek için yerleştirme öğeleri oluşturabilir.

PDFObject'in bazı temel özellikleri şunlardır:

• Geri Dönüş Mekanizması: PDFObject'in bir geri dönüş mekanizması vardır; böylece bir tarayıcı PDF'leri yerleştirmeyi desteklemediğinde PDFObject otomatik olarak geri dönüş mantığını etkinleştirir ve geliştiricilerin ihtiyaç duyduklarında PDF'ye bir bağlantı veya başka bir alternatif mantık sağlamalarına olanak tanır.
• PDF.js Entegrasyonu: PDFObject, PDF.js ile isteğe bağlı entegrasyon sağlayarak geliştiricilerin tarayıcının varsayılan PDF görüntüleyicisinden bağımsız olarak PDF'leri yerleştirmesini sağlar. Bu özellik, tarayıcının PDF belgelerini HTML'ye yerleştirmeyi desteklemediği durumlarda kullanışlıdır.
• PDF Açık Parametreleri: PDFObject, geliştiricilerin PDF görüntüleme için parametreler belirlemesine olanak tanıyan Adobe'nin tescilli PDF Açık Parametreleri'ni destekler. Bu, görüntüleme modu ve diğer Adobe'ye özgü ayarlar gibi seçenekleri içerir. Tüm bu parametreler burada bulunabilir.

GitHub İstatistikleri

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

PDFObject ile Başlarken

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

npm i pdfobject

Tarayıcı Destek Doğrulaması ile PDF'yi HTML'ye Gömün

PDFObject kütüphanesini kullanarak bir PDF belgesini HTML'e gömebiliriz. Başlangıçta, tarayıcının PDF Object kütüphanesinin supportsPDFs yöntemini kullanarak PDF belgesini HTML'e gömmeyi destekleyip desteklemediğini kontrol edeceğiz. HTML'e PDF gömmeyi desteklediğini belirten true değerini döndürürse, PDF'yi embed("document_name.pdf","#elementid") yöntemini kullanarak HTML'e gömeceğiz. Bu işlev PDF'yi HTML'deki belirli bir öğeye gömecektir. Tam boyutlu PDF gömme için herhangi bir öğe kimliği belirtmeyeceğiz ve yöntemi embed("document_name.pdf") olarak çağıracağız. Ancak, HTML'e PDF gömmeyi desteklemediğini belirten false değerini döndürürse, gerektiği gibi başka bir 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:

Bir Geri Dönüş Mekanizması Oluşturun

PDFObject kullanarak bir web sayfasına PDF yerleştirirken bir geri dönüş mekanizması kurabiliriz. PDFObject, tarayıcının HTML'ye PDF yerleştirmeyi desteklemediği durumlarda etkinleştirilir. PDFObject, embed işlevini çağırırken alternatif bir mantık içeren fallbackLink adlı bir parametre kullanır. Yani, bir tarayıcı PDF yerleştirmeyi desteklemiyorsa, fallbackLink'te bulunan kod, belirtilen div öğesinde yürütülür. Ayrıntılar için aşağıdaki kod parçacığına bakın:

Çıktı

Çıktı ekran görüntüsü, yedek mekanizma tarafından görüntülenen içeriği görüntüler. Yedek mekanizma, tarayıcı PDF'leri HTML'ye yerleştirmeyi desteklemediğinde etkinleştirildi.

Adobe'nin PDF Açık Parametreleri ile PDF'yi Gömün

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: { parameters }}) 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ığına bakın:

Çıktı

Aşağıdaki ekran görüntüsü, HTML'e ek parametrelerle gömülmüş PDF belgesini gösteriyor; bu parametreler, gömülen öğenin işlendikten sonra 3. sayfaya kaydırılmasını sağlıyor:

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

Bildiğimiz gibi PDFObject, PDF'leri HTML'ye yerleştirmek 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 sunar. Alternatif yöntem, PDF.js'yi PDFObject ile bütünleştirmektir. Bunu yapmak için, sunucumuzda PDF.js'yi kurmamız ve ardından ForcePDFJS: true ve PDFJS_URL: path/to/viewer.html/in/pdf.js parametrelerini embed işlevine geçirmemiz gerekir.

Not: Aşağıdaki örnek kod parçasında, PDF.js kütüphanesini içeren bir sunucu oluşturduk ve başlattık, dolayısıyla http://localhost:8888, PDF.js kütüphanesini işaret ediyor.

Çıktı

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

Çözüm

Sonuç olarak, PDFObject, PDF belgelerini HTML'e yerleştirmek için kullanımı kolay bir JavaScript kütüphanesidir. Bir işleyici olarak işlev görmez ve tarayıcının yerleştirme öğelerine desteğine güvenir, bu da yerleştirme öğesini desteklemeyen tarayıcılarda bozuk bir kullanıcı arayüzü gibi sorunlara neden olabilir, ancak kütüphane, yerleştirme öğesi için destek algılama ve geri dönüş mekanizması aracılığıyla bu tür sorunları çözmek için özelliklere sahiptir. PDF.js'yi PDFObject ile entegre ederek, yerleştirme öğelerini desteklemeyen tarayıcılarda da PDF'leri işleyebiliriz. Sınırlamalarına rağmen, PDFObject, PDF belgelerini web sayfalarına yerleştirmek ve işlemek için değerli bir araç olarak öne çıkıyor.

Benzer Ürünler